Pasang Artikel Terkait dengan Tambahan Gambar

Pasang artikel terkait atau related post - memasang related post dibawah halaman posting akan sangat membantu pengunjung untuk melihat postingan lainnya yang berhubungan dengan label categori dari postingan tersebut.

Adanya artikel terkait atau related post juga dapat mengurangi bounce rate blog dapat meninggkatkan page view, cara lain bisa juga dengan membuat daftar isi diblog dengan melengkapi navigasi-navigasi yang mengarah ke setiap artikel akan mempermudah pengunjung untuk melihat artikel lain. Berikut ini tips cara membuat artikel terkait :

Langkah Pertama
cari kode </head>

Kemudian letakkan kode dibawah ini diatas kode </head> tersebut

<!--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/AVvXsEjnnIPfpWbGzQS6TC1WEA76em245m5bOXmetvj7axMORz3Yt0fchArDpWbZodRNFWPjvhqPYEVtTsAR7qJY6Lr12QM5ScnPNHAVgwoLZg1SI3S642ggU_6lzRsnVf-IWw8WG5fitoanyNk/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 Script

Langkah Kedua
Kemudian cari kode ini :

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

Kemudian paste kode dibawah ini tepat dibawah kede 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-->


Untuk menampilkan berapa banyak jumlah related post bisa merubah kode nilai kode ini :
var maxresults=5;


Sedangkan untuk mengganti title bisa dengan merubah :
var relatedpoststitle="Related Posts";

Langkah Ketiga
Simpang template sobat dan lihat hasilnya semoga berhasil

Selamat mencoba artikel ini dikutip dari : http://blog.ahmadrifai.net/2011/05/pasang-related-posts-thumbnails-gambar.html