Related Post dengan Thumbnails dibawah Postingan Blogspot

Membuat Related Post dengan Thumbnail pada Blogger bukan hal yang baru lagi bagi sahabat yang sudah sekian lama hidup di dunia blogspot. Related Post yang menyertakan image alias gambar secara thumbnail akan lebih mempercantik tampilan blog, dan diyakini dapat meningkatkan pageview pada blog sahabat yang mungkin saja bisa meningkatkan kualitas alexa pagerank atau tambahan recehan dolar.

Cara Membuat Related Post dengan Image Gambar Posting adalah sebagai berikut:

1.Login ke akun blogger kamu.

2.Masuk ke Rancangan/Design >> Edit HTML

3.Beri tanda centang pada "Expand Template Widget".

4.Cari kode  </head>

5.Letakkan kode berikut diatas/sebelum kode </head>

<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 src=’http://jiox.googlecode.com/files/sambung.js’ type=’text/javascript’/>
</b:if>

6.Search atau cari kode ini :

<div class=’post-footer-line post-footer-line-1′>

kalau tidak ada, alternatifnya cari kode ini :

<p class=’post-footer-line post-footer-line-1′>

7.Kemudian, Letakkan/Paste kode berikut diatasnya :

<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><a href=’http://alkatro.com/’ style=’display:none;’>simple tips</a>
<script type=’text/javascript’>
var currentposturl=&quot;<data:post.url/>&quot;;
var jumlahpost=7;var judulnya=”Artikel Terkait”;
removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();
</script>
</div><div style=’clear:both’/>
</b:if>

Keterangan :
Ganti  var jumlahpost=7 dengan jumlah post yang ingin ditampilkan.
Ganti var judulnya="Artikel Terkait" dengan nama yang kamu inginkan.


8.Save Template





alkatro.com

Baca Juga Artikel dibawah ini :

Posted in: Blogspot