Menampilkan Related Post Dengan Thumbnail Pada Blogger

Menampilkan related post (post yang berkaitan) di tiap postingan blog anda akan mempermudah navigasi bagi pembaca. Apalagi ditambah dengan thumbnail dari post terkait yang tentu saja akan semakin mempercantik blog anda.

Menampilkan Related Post dengan Thumbnail Pada Blogger

Berikut ini langkah-langkah instalasinya:

1. Login ke dashboard blogger anda, lalu klik Tata Letak => Edit HTML. Thick Expand Template Widget.


2. Cari kode berikut ini:
   

   </head>



3. Lalu letakkan kode ini diatas kode tersebut
   

   <!--Related Posts with thumbnails Scripts and Styles Start-->
   <b:if cond='data:blog.pageType == "item"'>
   <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, “Times New Roman”, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs20.js' type='text/javascript'/>
   </b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->



4. Selanjutnya, cari kode
   

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

   
   jika tidak ketemu, coba cari kode dibawah ini
   

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



5. Setelah anda menemukan salah satu kode diatas, letakkan kode ini di bawahnya
   

   <!-- Related Posts with Thumbnails Code Start-->
   <b:if cond='data:blog.pageType == "item"'>
   <div id='related-posts'>
   <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.isLast != "true"'>
   </b:if>
   <b:if cond='data:blog.pageType == "item"'>
   <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
   <script type='text/javascript'>
   var currentposturl="<data:post.url/>";
   var maxresults=5;
   var relatedpoststitle="Related Posts";
   removeRelatedDuplicates_thumbs();
   printRelatedLabels_thumbs();
   </script>
   </div><div style='clear:both'/>
   </b:if>
   <!-- Related Posts with Thumbnails Code End-->



6. Anda dapat menentukan jumlah related post yang diinginkan dengan mengedit kode ini
   

   var maxresults=5;



7. Untuk mengubah judul Related Post, anda tinggal mengedit kode dibawah ini
   

   var relatedpoststitle="Related Posts";

Untuk mengubah warna, anda dapat mengedit kode css nya. Jika ada yang tidak dimengerti, silahkan tinggalkan komentar dan insya Allah saya akan membantu anda. Untuk live preview, silahkan lihat bagian bawah post ini.

Finished

* Thanks to Aneesh for the great code!