Cara Menambahkan Widget Related Post di Blog Dengan Thumbnail

Widget posting terkait ini adalah SEO yang dioptimalkan dan cepat di load. Judul tampil dengan gaya elegan yang pastinya akan menarik pengunjung Anda.

Langsung saja di eksekusi, berikut caranya
1.Masuk ke blog kalian, pilih templat dan edit template.
  Cari kode ]]></b:skin> letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

 /* Related Posts CSS */
.pre-head{font-size:20px; margin:25px 6px 10px; font-weight:500;}
.related-pre{margin:0 0 25px; overflow:hidden;}
.related-pre a{ margin:6px 6px; float:left; width:31.32%; height:150px; 
position:relative;}
.related-pre img{ height: 100%; width: 100%;}
.pre-title{ background: rgba(0, 0, 0, 0.5); color: #fff; 
font-size:13px;line-height:21px; overflow:hidden; height: 25px; 
bottom:0; padding: 9px 14px 20px; text-align: left; width: 80%; 
position:absolute;} 


2. Copy script di bawah ini tepat di atas kode </head>

 <b:if cond='data:blog.pageType == 
&quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[

// related post widget
var relatedTitles = new Array(); var relatedTitlesNum = 0; var 
relatedUrls = new Array(); var thumburl = new Array(); function 
related_results_labels_thumbs(e) {for (var t = 0; t < 
e.feed.entry.length; t++) { var l = e.feed.entry[t]; 
relatedTitles[relatedTitlesNum] = l.title.$t; try { 
thumburl[relatedTitlesNum] = l.gform_foot.url } catch (r) { s = 
l.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = 
s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), 
thumburl[relatedTitlesNum] = -1 != a && -1 != b && -1 !=
 c && "" != d ? d : 
"http://1.bp.blogspot.com/-Nit_LiUtMHE/VflsSxNxENI/AAAAAAAADiM/CuVVm4SVl8E/s320/No-image-bt9.jpg"}
relatedTitles[relatedTitlesNum].length > 47 && 
(relatedTitles[relatedTitlesNum] = 
relatedTitles[relatedTitlesNum].substring(0, 47) + "..."); for (var i = 
0; i < l.link.length; i++) "alternate" == l.link[i].rel && 
(relatedUrls[relatedTitlesNum] = l.link[i].href, relatedTitlesNum++) }}
function removeRelatedDuplicates_thumbs() {for (var e = new Array(0), t =
 new Array(0), l = new Array(0), r = 0; r < relatedUrls.length; r++) 
contains_thumbs(e, relatedUrls[r]) || (e.length += 1, e[e.length - 1] = 
relatedUrls[r], t.length += 1, l.length += 1, t[t.length - 1] = 
relatedTitles[r], l[l.length - 1] = thumburl[r]);  relatedTitles = t, 
relatedUrls = e, thumburl = l}
function contains_thumbs(e, t) { for (var l = 0; l < e.length; l++) 
if (e[l] == t) return !0;  return !1}
function printRelatedLabels_thumbs() { for (var e = 0; e < 
relatedUrls.length; e++) relatedUrls[e] != currentposturl && 
relatedTitles[e] || (relatedUrls.splice(e, 1), relatedTitles.splice(e, 
1), thumburl.splice(e, 1), e--); var t = 
Math.floor((relatedTitles.length - 1) * Math.random())  , e = 0; for 
(relatedTitles.length > 0 && document.write('<h4 
class="pre-head">' + relatedpoststitle + "</h4>"), 
document.write('<div class="related-pre"/>'); e < 
relatedTitles.length && 20 > e && e < maxresults;)
 document.write('<a '), document.write(0 != e ? '"' : '"'), 
document.write(' href="' + relatedUrls[t] + '"><img src="' + 
thumburl[t] + '"/><div class="pre-title">' + relatedTitles[t] +
 "</div></a>"), t < relatedTitles.length - 1 ? t++ : t = 
0, e++;  document.write("</div>"), relatedUrls.splice(0, 
relatedUrls.length), thumburl.splice(0, thumburl.length), 
relatedTitles.splice(0, relatedTitles.length)}
//]]>
</script>
</b:if> 


3. Copy Html di bawah ini dan letakkan tepat di bawah post-footer-line-3

 <b:if cond='data:blog.pageType == 
&quot;item&quot;'>
<div id='related-pre'>
<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=8&quot;'
 type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Related Posts &quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
 

 untuk menampilkan jumlah artikel yang kalian inginkan di related post, kalian bisa ganti ang di kode HTML di atas    sesuai keinginan anda..

Selanjutnya klik simpan, dan lihat hasilnya.

mudah kan, kalau kalian sudah mencoba jangan lupa tinggalkan jejak kalian ya..
Happy blogging…