Blogger Pemula | Membuat Related Post Blogger dengan Thumbnail

Arandale's

ADS HERE!

kali ini ane akan posting cara membuat artikel terkait atau kalo bahasa kampung ane Related Artikel hehe :)
artikel terkait ini sangat memudahkan para pengunjung blog kita yang ingin langsung mengunjungi beberapa postingan yang terkait dengan postingan yang sedang dibuka.

nah, artikel terkait ini juga berfungsi Untuk meningkatkan kunjungan ke setiap postingan kita, Artikel Terkait akan tampak lebih menarik jika menampilkan gambar dan cuplikan postingannya.contohnya seperti ini :


langkah-langkah nya sebagai berikut :

1. Masuk ke Menu Dashboard Blogger, dan pilih navigasi Design  kemudian klik Edit HTML dan centang expand Widget Tempalate.
2. Selanjutnya cari kode dan letakkan kode di bawah ini tepat sebelum kode

   </head> 

   setelah itu copas script dibawah ini dan letakkan diatas </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, “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 type='text/javascript'>
   var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEmFnxtWl2oDA17F9E5HCvZA4ezYBn-IEITSlCARCJAy8Epm-ynW0Ls1YbTQVif3PjwPQWUjoYdR2KI9betHEXvYwOQIMee7GP_8TKdzl0D7hOZ01OCbPdoBzbcBlsZ_ZyJwomvC28Soo/s400/noimage.png";
   var maxresults=5;
   var splittercolor="#d4eaf2";
   var relatedpoststitle="Related Posts";
   </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--> 

3. lalu cari script dibawah ini dengan menekan CTRL+F

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

atau

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

kalo sudah ketemu, lalu copas script dibawah ini dan letakkan diatas script yang dicari tadi

<!--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> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

4. Untuk menentukan jumlah tampilan, ganti angka ’5′ dengan yang anda inginkan.

var maxresults=5;

sumber http://www.bloggerplugins.org 

ADS HERE!