Zaenal "Abis" Abidin - Cara memasang related posts atau artikel terkait di blogspot dengan thumbnail gambar

Cara pasang related posts Blogspot dengan gambar atau thumbnail gambar mungkin yang sekarang sedang saudara cari, begitupula dengan saya. Namun, saya sudah lama menyimpan tutorial ini, dan untuk memudahkan pencarian sekaligus menambah jumlah pageview yang dapat meningkatkan traffic Alexa Rank (terlalu sering gonta-ganti template), saya arsipkan di #zaeblog.

Cara membuat post terkait dengan gambar atau thumbnail yang telah saya arsipkan dan dikutip dari bloggerplugins.org, adalah sebagai berikut:

Letakkan kode di bawah ini tepat di atas kode </head> :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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: 13px;
font-weight: bold;
color: black;
margin-bottom: 5px;
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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvPQITM1tk9FKJ663H6H5es_kr_GL1ZCJ9HFv5oYf2YfqZpblL_E7jwpWs2Uy4dx9DiE1-PNXScr8u1kmkNuhM5rre2AdO78QLKxou4gtfwcV8PiMkpoGJQWn3PpN0IzPEAJjDcMnG_U/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Entri Terkait &quot;;
</script>
<script src='http://blogergadgets.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-->

Setelah meletakkan kode di atas, silakan letakkan kode di bawah ini di bagian kode <div class='post-footer-line-1'> atau 2 dan 3 :

<!-- 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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Semoga entri tentang Cara Memasang atau Membuat Related Post Blogspot Dengan Gambar atau Thumbnail ini dapat membantu saudara untuk mempercantik tampilan blog dan meningkatkan peringkat SEO blog saudara, karena dengan memasang entri/ post atau entri/ related post secara tidak langsung akan menanam internal link pada blog saudara. #zaeblog

Update: Senin, Oktober 07, 2013