Cara Membuat Artikel Terkait Dengan Thumbnail Di Bawah Posting

Link yang ada pada blog anda tentunya anda taruh sebanyak mungkin dalam posting atau widget blog anda, yang jika link itu ditaruh atau ditempatkan secara terhubung(Terkait) satu sama lain antar posting anda akan membuat blog anda semakin ramai akan pengunjung karena biasanya penempatan link seperti "Artikel Terkait" ini membuat pengunjung tertarik akan postingan anda dan hal ini membuat traffic blog anda akan semakin naik. Dan salah satu membuat link itu agar terlihat menarik adalah dengan "Cara Membuat Artikel Terkait Dengan Thumbnail Di Bawah Posting". 

Langsung saja kita pokoknya. Lihat langkah - langkah pembuatan Artikel terkait di bawah ini :

1. Tentunya anda harus login ke blog anda terlebih dahulu
2. Lalu masuk ke Template > Edit HTML > Lanjutkan > Centang Expand Widget Template
3. Dan kemudian paste kode script di bawah ini dan letakkan tepat diatas kode script </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;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj39dxzuEimUWwjNzcZVCM036ichtYzJmP0zHdhxuA9QYiWeR-hEXeECbObUMLnRnQB4rKjKbw6lH5DgRmSnu8IIe-TB09t3auZtnc6g2nqHKkyIBjHUInWoDZvCugsI-kdpq0uTGwZm9o/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</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-->

    4.   Selanjutnya cari kode script di bawah ini :

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

   5.   Setelah ketemu kode script pada langkah 4 tadi paste kode script di bawah ini tepat
         dibawahnya kode script pada langkah 4 :

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

    6.   Dan untuk menyesuaikan kebutuhan blog anda, anda dapat menganti beberapa kode script
          diatas, dan yang bisa diganti adalah sebagai berikut :

• Jumlah Artikel yang muncul

var maxresults=5;

•  Jumlah artikel terkait / label

max-results=6

• Judul artikel terkait

var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";

• Warna tulisan pada artikel terkait tersebut dapat anda ganti juga. Dan mengantinya harus harus menggunakan kode warnanya

var splittercolor="#d4eaf2"; 

Keterangan :

Pada tulisan yang berwarna merah dapat anda ganti sesuai typical blog anda.

Terima Kasih . . .