Membuat Related Post dengan Thumbnails

Membuat Related Post dengan Thumbnails - Hallo Sobat BMN semua… Sekedar mengingatkan saja mengenai postingan Tutorial Blog saya yang lalu yang membahas mengenai Membuat Navigasi Back To Top Menggunakan CSS, apakah Sobat BM7 semua sudah mengaplikasikannya ke blog Sobat? Bagaimana hasilnya? Semoga sukses dan bermanfaat ya…

Nah, untuk melengkapi postingan saya mengenai Tutorial Blog, pada postingan kali ini saya akan sharing ke Sobat BMN semuanya mengenai cara Membuat Related Post atau postingan terkait dengan Thumbnails. Supaya Sobat BM7 semua gak bingung mengenai Tutorial ini, mari kita lihat pada gambar di bawah ini apa yang dimaksud dengan Related Post dengan Thumbnails :

Kalo boleh saya terjemahkan dengan bahasa saya sendiri, Related Post dengan  Thumbnails adalah suatu menu yang menampilakan judul dan gambar pada postingan-postingan yang terkait dengan postingan yang sedang kita baca. Pengelompokan postingan biasanya berdasarkan Label dari postingan itu sendiri. Artinya jika kita sedang membaca postingan dengan Label Tutorial Blog, maka Related Post yang muncul adalah postingan-postingan yang termasuk di dalam label Tutorial Blog tersebut. Dan letak dari Related Post itu sendiri biasanya berada pada footer postingan blog kita.

Baiklah Sob, tanpa berpanjang lebar lagi, berikut adalah langkah-langkah membuat Related Post dengan  Thumbnails :

1. Seperti biasa, silakan Sobat BMN login ke akun blog Sobat
2. Pilih menu rancangan/design > edit HTML dan jangan lupa beri anda centang pada Expand Template Widget
3. Cari kode </head> (Agar lebih mudah gunakan shortcut ctrl+F untuk mencarinya
4. Setelah ketemu silakan Sobat Copy kode dibawah ini dan letakkan tepat diatas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2; /* Warna Backround  */
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVtE7M0-3GtpiR22t3IlDrdDcg_we46Y8rF4Ul7L_TclrJL3Vlir04bJeW6dMVSWUEiP8B07BV0EaedW6FsNprglnOaUxmBCPFf8e4Tvg4jPzTLVPEoBasDj_Cn_lAfuuWdBVH12Gu3EM/s400/noimage.png&quot;;
var maxresults=4; /* Jumlah related post yang akan ditampilkan */
var splittercolor=&quot;#000000&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Kemudian silakan Sobat cari kode seperti berikut
    <div class='post-footer-line post-footer-line-1'>
    Atau
    <p class='post-footer-line post-footer-line-1'>

   Copy kode dibawah ini SETELAH kode diatas

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
<br/><br/>

6. Terakhir, Silakan simpan dan lihat hasilnya