Cara Membuat Related Post Dengan Thumbnail

Anda Pernah melihat gambar di atas?ya itu di sebut Related Post Dengan Thumbnail yang pada dasarnya menampilkan posting yang berkaitan dengan artikel yang sedang anda baca.Berbeda dengan related post biasa,kalau ini menggunakan cuplikan gambar sehingga lebih menarik pengjung untuk melihat posting-posting anda yang lainya.Untuk Cara Membuat Related Post Dengan Thumbnail Anda Bisa Mengikuti Langkah Di bawah ini:

1. Masuk ke Design ---> Klik Edit HTML
2. Centang Expand Template Widget
3. Paste kode dibawah ini diatas kode </head>

<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.2em;

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://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>

</b:if>

4. Cari salah satu kode berikut ini:

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

atau <p class='post-footer-line post-footer-line-3'>

5. Setelah itu letakan kode dibawah ini dibawah salah satu kode langkah ke.4

<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://amatulla83.blogspot.com' 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>

6. Terakhir simpan template anda.

Terima kasih telah membaca Cara Membuat Related Post Dengan Thumbnail

Cara Membuat Related Post Dengan Thumbnail