Membuat Related Posts Thumbnail untuk Blogger

MENAMPILKAN link postingan terkait dengan thumbnail gambar akan memperindah tampilan halaman blog.

Dengan tampilan gambar ini, pengunjung blog akan tertarik untuk membaca posting terkait ketika mereka disajikan gambar menarik dengan thumbnail. Untuk menampilkan thumbnail related posts, berikut langkah-langkahnya:

1. Masuk ke dashboard Blogger, lalu ke Rancangan atau Layout >> Edit HTML dan centang "Expand Template Widget"

2. Cari kode: </head> lalu ganti dengan:

<!--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;

}

</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdcD4hw0BbNWz6wajgp7orUj2AucRcx88CNpCrNiuG0pPO2JGbws9ij9H6E6glE0lr-Nit-2h_VKZKhu2aoWeWiJ1wnY2IKEHbpT3GqjSc1tglzjhi5UFSTggU40M0SIGpqVx_D0LRap4/s400/noimage.png";

var maxresults=5;

var splittercolor="#d4eaf2";

var relatedpoststitle="Related Posts";

</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-->

</head>

3. Setelah itu, cari kode:  <div class='post-footer-line post-footer-line-1'>
Jika tidak menemukannya, cari kode yang ini:  <p class='post-footer-line post-footer-line-1'>

Setelah menemukannya, letakkan kode di bawah ini pada salah satu baris tempat ini potongan kode ini berada:

<!-- 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 style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

4. Anda dapat menyesuaikan jumlah posting terkait yang ditampilkan dengan mengedit kode: var maxresults=5;

5. Untuk mengedit judul widget, Anda dapat mengubah kode ini:
var relatedpoststitle="Related Posts";

6. Untuk mengubah thumbnail default, Anda dapat mengubah kode ini:  
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdcD4hw0BbNWz6wajgp7orUj2AucRcx88CNpCrNiuG0pPO2JGbws9ij9H6E6glE0lr-Nit-2h_VKZKhu2aoWeWiJ1wnY2IKEHbpT3GqjSc1tglzjhi5UFSTggU40M0SIGpqVx_D0LRap4/s400/noimage.png";

8. Untuk mengubah warna line splitter, Anda dapat mengubah kode ini:
var splittercolor="#d4eaf2";

Lantas, bagaimana untuk menampilkan posting terkait pada setiap halaman dan tidak hanya pada halaman posting? Anda hanya menghapus dua baris yang dimulai dengan <!-- remove --> dari langkah 3 dan 2.

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> dan <!-- remove --></b:if>

Selesai. Silahkan mencoba.