Cara memasang Related Post Bergambar dengan Mudah

Related Post adalah sebagai artikel atau postingan yang masih dalam satu kategori atau istilahnya artikel terkait. Misalkan label nya tentang Tutorial Blogger, maka akan muncul semua tentang Tutorial Blogger. Related Post yang saya bisikan tips nya kali ini adalah Related Post Bergambar, " Gambar Disamping Hanya Pemanis" . Related Post yang saya berikan ini sejajar ke kanan, serta bergambar dan hemat ruang postingan anda. Related Post tidak hanya menambah keren blog anda, tetapi juga membantu pageview bertambah. Postingan terkait ini sangat bermanfaat bagi blogger sendiri ataupun user. Sehingga memudahkan pengunjung menemukan artikel yang terkait, ataupun artikel yang menarik lainnya di blogger anda. Sebelum melakukan Tips ini, sebaiknya Backup terlebih dahulu Template anda, bisa dengan cara copy semua script HTML ke Notepad. Tujuannya adalah misalkan Related Post ini, tidak sesuai dengan keinginan anda maka dengan mudah mengembalikannya.

Cara pertama:

1. Masuk ke Blogger.
2. Template - Edit HTML
3. Copy - Paste kode berikut ini, dan letakkan di atas kode </head>

<!--Related Posts with thumbnails -->
<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:#00FF00;}
</style>
<script src='http://kucopas-js.googlecode.com/files/releatedimage.js' type='text/javascript'/>
</b:if>
<!--Related Posts With Thumbnails By MayCyber-Download-->

4. Jika sudah? Copy-Paste lagi kode berikut ini dan letakkan dibawah kode
<div class='post-footer-line post-footer-line-1'>

<!-- Related Posts with Thumbnails -->
<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>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=7;
var relatedpoststitle="Related Post";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails -->

5. Simpan Template!

Dan, Taraaaaa Related Post telah terpasang di Blogger anda.

Screenshoot:

Demikianlah Tutorial Blogger kali ini. Sekian dari saya, Semoga Bermanfaat!