May 24, 2015

Variasi Tampilan Posting di Halaman Depan Blog - Judul, Gambar, Dua Kolom

May 24, 2015

halaman depan cb online store
Variasi Tampilan Posting di Halaman Depan Blog: Judul Saja, Gambar Saja, Dua Kolom Auto Readmore.

HALAMAN depan blog (beranda, home, homepage) merupakan "etalase". Di halaman depan inilah semua konten diperkenalkan dan mulai ditelusuri, meskipun kebanyakan pengunjung menemukan blog kita dari single post (single page) sebuah posting.

Banyak juga pengunjung yang awalnya membuka halaman dalam, lalu "penasaran" ingin tahu tampilan halaman depan blog yang dikunjunginya. Jika bagus, ia mungkin akan lebih lama di blog itu.

Ada banyak variasi tampilan halaman depan, mulai dari posting penuh hingga yang terpopuler digunakan: Auto Readmore Style.

Tampilan halaman depan autoreadmore pun macam-macam, ada yang berupa daftar judul, judul dan gambar (thumbnail image), judul plus gambar thumbnail dan ringkasan, ada yang satu kolom, ada juga yang dua kolom seperti tampilan blog CB ini.

Tips desain blog berikut ini akan berbagi kode dan cara membuat variasi halaman depan blog. Silakan pilih sesuai dengan selera.

Halaman Depan dengan Daftar Judul Posting Saja (1)

Homepage hanya judul posting, tanpa gambar dan tanpa ringkasan (summary/snippets). Source & Demo.

1. Template > Edit HTML
2. GANTI kode


<b:include data='post' name='post'/>

DENGAN

<!--Post Titles Only-->
<b:if cond='data:blog.pageType != "item"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Post Titles Only-->


3. Save Template!

Kini tampilan halaman depan blog Anda hanya judul posting. Fast Loading!

Halaman Depan dengan Daftar Judul Posting Saja (2)

Hasilnya akan sama dengan yang di atas, namun caranya berbeda. (Source & Demo.)

1. Template > Edit HTML
2. Copas kode berikut ini sebelum atau di atas kode </head>

<style type='text/css'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</b:if>
</style>

3. Save Template!

Halaman Depan dengan Gambar Thumbnail Saja

Dikenal dengan sebutan "grid posts", berupa gambar posting saja yang tampil dalam 2-3 kolom di halaman depan. (Sumber). Cocok untuk blog video, foto, atau toko online. Lihat DEMO

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    var width = 200;
    var height = 170;
    var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTwVHdfQYvkZFqDACIuKleSMCz95qvAkwnxtgULO8bvLADsuPFeEzys1ATrVR91d9LlA6OTBZ2wZdF0y5RyBbtHIqFbHnP9eSQ3MRDRrLPJ-VEd_q4a-OTKGt-8hnZ1AVj2q7VGPjeRQ/s1600/no-thumb.png';
    var margins = "0px 0px 10px 10px";
    var fitThumb = 1;
    var titleTopPadding = 5;
    var titleBottomPadding = 8;
    var titleLeftRightPadding = 5;

    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
    $('.post-body').each(function(n, wrapper) {
        var wrapper = $(wrapper);
        var image = $(wrapper).find('img').first();
        var link = wrapper.parent().find('h3 a');
        var linkURL = link.attr('href');
        var linkTitle = link.text();

        $(link).remove();
        wrapper.empty();

        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');
            var thumbParent = $(image).parent();

            wrapper.append(thumbParent);

            if (fitThumb) {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width + '-c')
                    });
                image.attr('width', width).attr('height', height);
            } else {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width)
                    });
                image.attr('width', width);
                var changeHeight = (thumbHeight / thumbWidth * width).toFixed(0);
                image.attr('height', changeHeight);
            }

        } else {
            var image = $('<img>').attr('src', placeholder).attr('height', height).attr('width', width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }

        thumbParent.attr('href', linkURL).css('clear', 'none').css('margin-left', '0').css('margin-right', '0').addClass('postThumbnail');

        var thumbTitle = $('<div>').prepend(linkTitle).css('padding', titlePadding).css('opacity', '0.9').css('filter', 'alpha(opacity=0.9)').css('width', width).appendTo(thumbParent);
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top', '-' + summary + 'px');
        wrapper.css('float', 'left').css('height', height).css('width', width).css('margin', margins).css('overflow', 'hidden');
    });
    $('#blog-pager').css('clear', 'both');
});

function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length;++i) {
        images[i].onmouseover = function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}

if (window.addEventListener) {
    window.addEventListener('load', hideLightbox, undefined);
} else {
    window.attachEvent('onload', hideLightbox);
}
//]]>
</script>
<style>
.post {
    border-bottom: 0 dotted #E6E6E6;
    margin-bottom: 0;
    padding-bottom: 0;
}

h2,.post-footer {
    display: none;
}

a.postThumbnail div {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    background: rgb(125,126,125);
 /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;
    #7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}

a.postThumbnail:hover div {
    display: block;
}

.post-body img {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.post-body img:hover {
    -ms-filter: &quot;
    progid: DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;
    ;

filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}
</style>
</b:if>

3. Save Template!

Kini tampilan halaman depan blog Anda berupa grid image (gambar). Bagus buat blog galeri foto, video, atau online shop!

Daftar Posting Auto Readmore 2 Kolom di Halaman Depan

Membuat Dua Kolom Posting Homepage Blogspot ini banyak ditanyakan pengunjung blog CB. Ini tampilan khas Template Johny Wuss Series. Bedanya di kode.

Johny Wuss Series menggunakan kode Table of Content. Tips di bawah ini menggunakan kode "rekayasa" sehingga tampilan dua kolomnya mirip banget bahkan sama dengan Johny Wuss. (Lihat DEMO).

1. Template >> Edit Html >>
2. Copas kode berikut ini di bawah kode ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {width:49%;height:auto;margin:0 20px 5px 0;overflow:hidden;float:left;}
</style>
</b:if>

Ket:
Jika hasilnya masih satu kolom, atur besaran persentasenya jadi lebih kecil, misalnya 48%, 47%, dan seterusnya hingga "pas".

3. Save Template!

Itu dia Variasi Tampilan Posting di Halaman Depan Blog. Bisa  Judul Posting doang, Gambar doang, Gambar dan Judul, hingga yang berupa dua kolom. Good Luck! (http://contohblognih.blogspot.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

35 comments on Variasi Tampilan Posting di Halaman Depan Blog - Judul, Gambar, Dua Kolom

  1. Sangat bermanfaat. Anak siapa sih CB? Pinter banget.

    ReplyDelete
  2. abang CB , boleh minta tdk template yg serupa dg blog demo http://cbonlinestore.blogspot.com , :) kalau boleh tlg responnya ya

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/p/layanan-premium-cb.html

      Delete
  3. bos, boleh nanya gak untuk tampilan homepage widget di http://cbblogfoto.blogspot.com/ itu pengisian kode widgetnya manual atau pakai kode tertentu boleh dong di share atau diemail kodenya ke tipsanakayam@gmail.com terimakasih

    ReplyDelete
    Replies
    1. tinggal ketik aja nama labelnya

      Delete
    2. Makasih Cb.. saya juga dalam masalah Pakar DO'C diataas... dan alhamdulillah berhasil tinngal tulis nama Labelnya.. :)

      Delete
  4. hai CB bagaimana dengan cara membuat harganya, kan biasanya itu selain nama produk, ada harganya di bagian bawah thumbnail. Atau sebaliknya

    ReplyDelete
  5. variasi tampilan diatas sangat menantang untuk diuji coba....
    butuh sdikit ilmu ttg JS dan edit HTML...
    tks dah berbagi

    ReplyDelete
  6. bermanfaat sekali gan,tetapi apakah ada yang tampil hanya gambar dan judul saja,mohon jawabannya

    ReplyDelete
  7. gan tampilan depan blog ya grid tapi tidak responsive ukuran gambarnya, gimana caranya gan biar semua gambarnya jadi sama tampilanya, sebelumnya terima kasih

    ReplyDelete
  8. gan kalau menampilkan di home page hanya judul dengan gambarnya itu gimana gan,di blogspot.

    ReplyDelete
  9. aku praktekin yg "Daftar Posting Auto Readmore 2 Kolom di Halaman Depan" kok hasilnya g sperti yg d demo y gan? yg d demo bisa rapi atas bawahnya

    ReplyDelete
  10. Di versi mobile kok tidak berubah ya gan

    ReplyDelete
  11. Kalo cara buat tampilan kaya blog ini gimana mas CB ? tutorial nya dong

    ReplyDelete
    Replies
    1. jangan ngikut tampilan blog CB, soalnya suka gonti-ganti terus, namanya juga contoh blog :)

      Delete
  12. Kalo pinginnya kayak cara yang no.1 tapi ada gambar sama ringkasannya gimana,ya..?

    ReplyDelete
    Replies
    1. Itu ada linknya di alinea keempat
      http://www.contohblog.com/2014/02/membuat-auto-read-more-di-halaman-depan.html

      Delete
  13. Ini yang dicari2 ahirnya nemu juga makasih sob infonya

    ReplyDelete
  14. Ini yang saya muter-muter carinya. akhirnya work 100%

    ReplyDelete
  15. makasih infonya gan, harap bisa berkunjung balik di blog sederhana saya

    ReplyDelete
  16. eh malah post artikel dobel gimana atu mas? solusinya

    ReplyDelete
  17. kalo misalnya tampilan home nya kayak http://cbblogfoto.blogspot.com/ tapi gambar nya itu jadi kategori artikel gimna yah.. bantu saya bang pliss

    ReplyDelete
    Replies
    1. Jangan dibikin susah, pake saja kode yang suda ada :)

      Delete
  18. kalau tampilannya judul, Gamabr dan beberapa isi gimana ya bang 1 kolom

    ReplyDelete
  19. gan klo saya mau bikin cuplikan gambarnya saat kursor diarahkan ke judul posting kayak di web-web manga itu gimana ya?

    ReplyDelete
  20. langsung tak coba bro,,trim ya bro dah share tipsnya...doa meminta rezeki

    ReplyDelete
  21. Mantap....saya masih bingung,,,,tampilan halaman depan blog saya 7 postingan terbaca semua,,,,saya kepengin seperti tampilan di atas

    ReplyDelete
  22. Thanks infonya.. Mau coba dulu :D

    ReplyDelete

Contact Form

Name

Email *

Message *