Cara membuat related post dibawah postingan dengan thumbnail / Gambar

Ada beberapa widget blog yang menurut saya sangat penting, Kenapa ? karena widget ini sangat sangat berguna untuk membuat pengunjung blog kamu lebih betah berlama2 di blog yang kamu punya. Mungkin widget ini sudah tidak asing lagi bagi kalian namanya linkwithin, linkwithin adalah widget yang berguna untuk menampilkan related post atau postingan yang berkaitan dengan thumbnail atau gambar kecil yang biasanya terletak di bawah postingan blog kamu. Namun pada kesempatan kali ini saya akan member tahu dari alternatif dari widget linkwithin itu sendiri. Lihat langkahnya di bawah ini :

1. Masuk ke blogger.com

 
2. Klik Tata Letak (blog baru) atau Rancangan (blog lama) --> Pilih Edit HTML --> Klik Lanjutkan (untuk blog baru)  --> Centang Expand template Widget lalu kamu cari kode </head> . Gunakan ctrl+f untuk memudahkan pencarian.

 

3. Salin kode di bawah ini dan letakkan di atas atau sebelum kode </head>

<!--Start Related Posts Script From http://www.hzndi.blogspot.com-->
<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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTgrYXyy47zrx6skds-H4i6jkxT_tXj70BpGX5axNlPBmsEOHiLKFx5g4UlmQp38csrDw_mJvHIA-6-ak_EfcVZF8hAPQYhfqqYELNzhEM0YkU6vaOdO-WNeqip5o2bIXEss5qoX4DoAM-/s1600/No+Image.jpg&quot;;

var maxresults=7;

var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post From http://www.hzndi.blogspot.com-->

 Note

• Ganti angka 7 dengan angka berapapun yang kamu suka karena itu akan menampilkan jumlah postingan terkait yang akan di tampilkan.
• Ganti Related Posts dengan kata-kata yang kamu suka seperti "artikel terkait, baca juga, dll".

4.  Cari kode <div class='post-footer'> atau jika tidak ada maka kamu cari <data:post.body/> gunakan ctrl + f untuk memudahkan pencarian. Salin kode di bawah ini dan letakkan di bawah kode <div class='post-footer'> atau <data:post.body/>.

<!-- start related posts-->
<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=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><br/><a href='http://unique-www.blogspot.com' target='_blank'><font color='#ccc' size='small'>Tutorial Blog dan SEO</font></a><div style='clear:both'/>
</b:if>
<!-- end related posts-->

5. Simpan Template dan kamu lihat hasilnya.

Sumber

Posted in: Tutorial