Cara Pasang Related Post Bergambar

Di postingan saya yang lalu, saya telah membahas bagaimana Cara membuat Related Post. Kalo related post yang ini ada tambahan yaitu yang bergambar. jadi dengan melihat gambarnya, pengunjung sedikit banyaknya tahu isinya dan tidak kalah pentingnya tampilan related post anda lebih menarik.

Baiklah Teman2 Langsung aja kita praktekkan yuk.!! dengan mengikuti langkah-langkahnya sbb :

1. Silahkan login dulu ke Akun blogger anda
2. Pilih Tata Letak dan Edit HTML
3. Letakkan kode berikut ini di atas kode </head>

<!--- Awal Related Posts Bergambar dengan Scripts dan Styles -->

<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 src='https://sites.google.com/site/tutorialbloghost/mypictures/RelPost-Bergambar.js' type='text/javascript'/>
</b:if>
<!--- Akhir Related Posts Bergambar dengan Scripts dan Styles -->

3. Lalu cari kode dibawah ini

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

4. Kalau sudah ketemu salah satu dari dua kode di atas, maka letakkan kode berikut tepat di bawahnya

<!--- Awal Code Related Posts Bergambar-->

<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://tutorialines.blogspot.com/2011/05/cara-membuat-related-post-bergambar.html' style='display:none;'>Related Posts Bergambar buat blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

<!--- Akhir Code Related Posts Bergambar-->

5. Klik tombol SIMPAN TEMPLATE anda

Catatan :

Silahkan anda boleh atur jumlah post yg ingin ditampilkan dalam daftar related post, pada bagian [var maxresults=5;]

Judul Related Post boleh anda ganti sesuai apa yang menurut anda menarik pada bagian [var relatedpoststitle="Related Posts";]

Selesai ! ... Semoga Bermanfaat  [HAPPY BLOGGING]