Bagaimana cara membuat Related Post Tampil Tumbnail

jumpa lagi dengan mastony,kali ini mastony akan share cara membuat related post Dengan Thumbnail Apa itu Related Post ..?,Related Post/Artikel yang berkaitan Sehingga Pengunjunag/visitor ingin tau artikel Post 1 yang Berkaitan Dengan post lainnya,Related Post ini Sangat cocok untuk Optimasi SEO onpage Blog kita,Sebelumnya mastony sudah membahas di artikel terkait namun tanpa disertai gambar,

sobat tertarik untuk mencoba ikuti langkah langkah berikut ini :
1.seperti biasa Login ke blogger kesayangan Anda
2.Template -->> Edit Html -->> Lanjutkan -->> Expand Widget Templates
3.Cari kode
</head>

4.jika sudah tempelkan kode berikut sebelum kode </head> tadi

<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/AVvXsEi8jq4RETDOQO26PWqfEUcDeWmLjaLSbXVbLaWNHeUZn8Czrg8DXmyFSngLCJrtbOl2VJm5Pl0iB80zlnrYyGE3C0SSECHGoirNwS1g8pSIqzt8s-japzzjXsWua8JF4H-jYnqa0LKW4-w/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

5.selanjutnya cari lagi kode di bawah :
a)

<div class='post-footer-line post-footer-line-1'>

jika tidak ada cri yang berikut :
b)

<p class='post-footer-line post-footer-line-1'>

selanjutnya tempelkan kode berikut setelah kode a  atau b tadi

<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://id-mastony.blogspot.com/2012/06/bagaimana-cara-membuat-related-post.html'>Blognya mastony</a>
</b:if></b:if>

6.simpan,oya preview dulu jika tidak ada kesalahan save
Anda dapat menyesuaikan jumlah maksimum posting terkait yang ditampilkan dengan mengedit baris ini dalam kode.

var maxresults=5;

Anda juga harus mengedit posting per label (itu idealnya harus satu lagi yang maxresults)

max-results=6

Untuk mengedit judul widget Anda dapat mengubah baris kode ini

var relatedpoststitle="Related Posts";

To mengubah thumbnail default, Anda dapat mengedit baris kode ini

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8jq4RETDOQO26PWqfEUcDeWmLjaLSbXVbLaWNHeUZn8Czrg8DXmyFSngLCJrtbOl2VJm5Pl0iB80zlnrYyGE3C0SSECHGoirNwS1g8pSIqzt8s-japzzjXsWua8JF4H-jYnqa0LKW4-w/s400/noimage.png";

Untuk Mengubah Warna Line Splitter, mengedit

var splittercolor="#d4eaf2";

nah Demikian cara bikin related post tampil tumbnail,,selamat mencoba?..
Semoga tutorial kali ini bermanfaat bagi sobat ..

"Happy Blogging ..