Cara Membuat Related Post Thumbnail (Artikel Terkait Bergambar) di Blog

Tweet

      Cara Membuat Related Post  Thumbnail  (Artikel Terkait  Bergambar) di Blog pada bagian bawah postingan akan terlihat Related Post (Artikel Terkait) berupa Gambar dan Judul (Jika pada postingan tidak ada gambar, maka tambilan gambar akan bertuliskan no image),  jika sobat berminat untuk Membuat Related Post Thumnail (Artikel Terkait Bergambar) di Blog , silahkan ikuti langkah-langkahnya dibawah ini.

















1. Login ke Blogger

2. Design (Rancangan) => Edit HTML =>  Centang Expand Widget Template

3. Cari Kode  </head>  (cari dengan Ctrl+F) 

4. Letakkan Kode di bawah ini tepat di atas kode </head>



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





5. Kemudian Cari Kode  <div class='post-footer'>

6. Masukkan Kode  bawah ini tepat diatas kode  <div class='post-footer'>



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

7. Save Template

Catatan : Kode  var maxresults=8 diatas, angka 8 bisa sobat ganti sesuai dengan yang sobat mau.