Cara Membuat Related Post dengan Gambar Thumbnail

Salah satu keunikan dari SL Super Fast Blogger template adalah related post dengan gambar thumbnail. Seperti halnya pada situs ini, related post berupa gambar thumbnail disertai ringkasan singkat kalimat yang menyertainya.

Related post merupakan sebuah kolom yang berisi link terkait dengan artikel utama yang sedang sobat buka. Dengan begitu, keberadaan related post teramat sangat penting bagi pembaca. Tujuannya tidak lain adalah memberikan bantuan kepada pembaca bahwa untuk menambah wawasan yang terdapat pada artikel yang sedang dibaca, selanjutnya bisa membaca beberapa artikel terkait di bawahnya.

Cara Mudah Membuat Related Post dengan Gambar Thumbnail di Blog

Caranya cukup mudah, yakni dengan:

1. Buka akun blogger > pilih template > mode HTML

2. Copas code html di bawah ini tepat di atas kode </head>

<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJAq3mSjXRznSJZ0LDLn6MEPj3Wd7OOHYJ__v3q0lmwAXiW6EmD7gWliws39mdrraGTKQ1Y2YBWHk64CuTI55TGF9vTsm7-titU7hsVeQq2Onkjz-Yqsi0ceP1adC6Av9xZoXDM2gY0YT/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>

3. Copas kode di bawah ini tepat di atas kode ]]></b:skin>

#related_posts{margin-top:15px}#related_posts h4 {color:#FD4646;margin: 0px 0px 5px;font-size: 130%;font-family: &#39;Oswald&#39;,Arial;font-weight: 500;}#related_img{margin:0;padding:0;}#related_img:hover{background:0}#related_img ul{list-style-type:none;margin:0;padding:0}#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}#related_img li a{color:#2672a0;}#related_img li a:hover{text-decoration:underline}#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}#related_img .news-text{display:block;text-align:left;font-weight:400;text-transform:none;color:#333;font-size:12px;line-height:16px}#related_img img{float:left;margin-right:7px;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}

Note: bisa juga kode di atas dicopas di atas kode </style>

4. Copas kode di bawah ini tepat di atas <div class='post-footer'> atau di bawah kode <data:post.body/> atau di antara kode <b:includable id='post' var='post'/> dan <b:includable id='mobile-post' var='post'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts:</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>

5. Save template

Demikian tips blog kali ini, semoga bermanfa'at. Salam.
Source