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.
<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:”http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/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: 'Oswald',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 == "item"’>
<div id=’related_posts’>
<h4>Related Posts:</h4>
<b:loop values=’data:post.labels’ var=’label’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50"’ 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
