Cara Membuat Artikel Terkait Thumbnail di Blog

Cara Membuat Artikel Terkait Thumbnail di Blog. kali ini saya akan membahas tentang Cara Membuat Thumbnail Artikel terkait. Memodifikasi dengan memberikan Thumbnail atau gambar pada Artikel terkait atau related pos, terkesan lebih menarik dan bagus untuk tampilan blog. Tak jarang juga dengan Artikel terkait blog kita dikemas dengan gaya Thumbnail atau gambar akan merangsang dan menambah penasaran pengunjung tuk melihat artikel yang lainya di blog kita.

Untuk pembuatan Thumbnail artikel terkait pada blog bisa sobat lihat caranya di bawah ini.

1. Login Blogger => Rancangan => Edit HTML
2. Kemudian Contreng Expand Widget Templates.
3. Cari Kode </head> pada Templates blog anda kemudain tempatkan
kode di bawah ini tepat di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Lalau cari kode <div class='post-footer'>, kemudian tempatkan kode di bawah ini tepat di atasnya

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5. langkah terakhir Simpan Tempalates, dan lihat hasilnya.

demikian tutorial Cara Membuat Artikel Terkait Thumbnail di Blog. Semoga Bermanfaat.