Cara Pasang Posting Terkait Thumbnail Blogger [Related Post]

Banyak dari pembaca blog saya selalu bertanya kepada saya bagaimana cara pasang related post thumbnail. Jadi hari ini saya bagi ke mereka pada posting ini. Saya berharap kawan-kawan lain juga akan menyukai. Ini terlihat seperti yang ditunjukkan pada gambar di bawah ini. sebenernya sih ada salah satu tool online yang bisa kita pakai untuk langsung yang bisa kita pasang related post thumbnail, contoh nya seperti pada blog saya ini, kadang-kadang ada blog yang memang tidak mau kita pasang related post thumbnail di blogger kita. Jadi bagus nya pakai yang otomatis saja nama nya Link Within

Jika Anda tertarik untuk menempatkan widget ini pada situs anda, silahkan ikuti langkah berikut:
Mengedit template Anda, Masuk ke dashboard blogger Anda - klik pada Design - Edit HTML dan centang Expand Template Widget. Cari kode berikut ini:

</head>

Sekarang copy kode di bawah ini letakkan di atas kode head tadi

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
.tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAoYIjo1ImceYFKEUr2k9LEnyW-xJoNdvGRbhzvtfyFHa7Zc_7rCe4PPkdhEOen-L_hOk2Ys282feGh1LQA_CIIDC4XfR1RZ_1h4F7ggJpqSFSkVrNwUhnjvlYcI86v1HOt0oOq7LeS0/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAoYIjo1ImceYFKEUr2k9LEnyW-xJoNdvGRbhzvtfyFHa7Zc_7rCe4PPkdhEOen-L_hOk2Ys282feGh1LQA_CIIDC4XfR1RZ_1h4F7ggJpqSFSkVrNwUhnjvlYcI86v1HOt0oOq7LeS0/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VaWt_8351ACS0sk0SDEpPE8K_Q1nIotgW_91LudIIQg64SSbx9PXMAAGoNVBPOekW5NfFzkp3UgeGDjuq3oqf2-0nzyBY8mT7caNQwM8B_Q5zh1cyI_7gZEai807rhWOIHsN0Seg3Mo/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>

Selanjutnya, Cari kode berikut ini:

post-footer-line post-footer-line-1

Tempatkan kode di bawah ini setelah kode yang di atas tadi:

<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=12"' type='text/javascript'/></b:if></b:loop>
<h4>Related Posts</h4>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Simpan template Anda dan sudah selesai. Anda dapat menetapkan jumlah maksimum posting terkait sampai 20 posting. Anda juga dapat menyesuaikan jika Anda memiliki pengetahuan kecil dari HTML. Itu saja Cara Pasang Posting Terkait Thumbnail Blogger [Related Post] semoga bermanfaat metal!!