Related Post Dengan Gambar Di Blogspot

Baca Juga

Bismillah... pada kesempatan ini saya akan tulis kembali tentang cara membuat related post di blogger,  namun pada kesempatan ini saya akan menulis tentang related post dengan gambar, untuk membuat related post dengan gambar seperti di bawah caranya hampir sama seperti pada postingan yang terdahulu, namun ada sedikit penambahan script.

Related post dengan Thumbail/Gambar

Oke sekarang kita langsung saja, langkah pertama untuk membuat related post dengan thumbail/gambar yaitu :

• Sobat Login ke akun Blogger
• Terus Sobat masuk ke area Design/Rancangan Blog
• Langkah Selanjutnya Klik Tab Edit HTML
• Terus jangan lupa sobat centang Expand Widget Templates
• Terus sobat cari tag </head>, setelah ketemu tag </head> sobat copy kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.rthumbail{
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
#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;
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDPI70sKXfFU91yDwsS03YXzRfMsx9QfpkLOyKoY4V-6VuvkDSJIH2T7l4IaQLVnJEi7kF7MQjR0PiAfr0t07O8yEPr2PUgbVUEN8dXE73QhvxjDDd_Ls_iLLHj_t3tzMMEsOh4L3irhg/s746/noimages.gif&quot;;
var maxresults=12;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;&quot;;
</script><script src='http://bloggertutorial.googlecode.com/files/related-thumbail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Setelah itu sobat cari tag/kode <div class='post-footer-line post-footer-line-1'> atau yang menyerupai atau sobat juga bisa meletakannya di bawah tag <data:post.body/>, silahkan yang mana saja boleh yang penting bisa dipasang, setelah itu sobat copy kode di bawah ini dan letakan di bawah kode <data:post.body/> atau kode <div class='post-footer-line post-footer-line-1'>.

Kode Related Post Dengan Thumbail 

<div class='rthumbail'>
<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'/>
</b:if>
</div>

Langkah terakhir sobat save template blog nya, dan lihat hasilnya, semoga berhasil. Good Luck Happy Blogging