CARA MEMBUAT RELATED POST WITH THUMBNAIL

Related Post with thumbnail pada dasarnya adalah merupakan salah satu upaya untuk mengoptimalkan keberadaan blog yang kita miliki. Dengan adanya related post with thumbnail ini kita akan mampu menggiring para visitor blog untuk membuka artikel-artikel lainnya yang terkait dengan artikel yang sedang dibacanya, dengan demikian secara tidak langsung related post with thumbnail ini akan memaksimalkan pageviews blog yang kita miliki.

Berikut ini adalah cara-cara membuatnya :

• Login ke Blog kamu.
• Pilih Rancangan > EDIT HTML.
• Jangan Lupa Centang Expand Widget Template.
• Cari kode </head> setelah ketemu copy kode di bawah ini tepat di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lOXrNy_z-qWWB5tib1sE3KOuS1kH1Whx3hcwYoKiY0X8xe-jMDVxAOvLDmVGmZF6O6i18m6tEaEk-tFn6cKwbGRyTSlWjiSBkCqrACSGFyCtNBlWa5fAWcYQwhtDfX3JxtmG8FdH3ic/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.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-->

Selanjutnya Cari kode <data:post.body/> setelah ketemu copy kode di bawah ini tepat di bawah kode <data:post.body/>

<!-- 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>
<!-- Related Posts with Thumbnails Code End-->

Simpan dan lihat hasilnya.

Keterangan :
var maxresults = 5 adalah jumlah artikel yang ditampilkan.
var relatedpoststitle="Related Posts";  kamu bisa ganti kata Related Posts dengan Kata lainnya.

Sekian penjelasan dari saya semoga sobat bisa memahaminya, dan selamat mencoba.

Tweet