Membuat Related Post Dengan Gambar

Cara Membuat Related Post dengan Gambar (Thumbnail Image) plus Judul di Bawah Posting Blogger.

POSTING wacana cara menciptakan related post dengan foto atau gambar thumbnail (Related Posts with Thumbnail Image) ini dibentuk terkait pertanyaan dan undangan seorang pengguna template New Johny Wuss. Ia ingin memakai posting terkait yang menampilkan foto dan judul.
Berikut CB share instruksi posting terkait plus gambar thumbnail dan judul sebagaimana yang digunkana tenmplate maskolis Pak Dhe Johny.
Pengguna New Johny Wuss lainnya boleh mempraktekan ini. Caranya, sebelumnya HAPUS dulu SEMU instruksi di template yang bertuliskan "related post, kemudian lakukan dua langkah gampang berikut ini.

Cara Membuat Related Post dengan Gambar di Blogspot

1. Copy + Paste instruksi di bawah ini DI ATAS kode </head>

<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:100%;border-top:3px solid #ddd;margin:5px 0}
#related-posts .judul{background:none;color:#333;font:16px Oswald;padding:5px 0}
#related-posts .maskolis_img {padding:0 0;width:140px;height:95px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#related-posts .maskolis_img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
</style>
<script type="text/javascript">//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhliI_wytnNnrgrW6fV3cN2sPqM9XmDEuksqM-tGqjqbmcKrWWaX3lL4-GMWVwUMHduhLx8k5MK7-2S3tjjFG_-kffsXnE30HsXIgvzoIVQFmYkr_tm8U3m23PISIndo3eB-Shr2hee4QEV/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 12px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:140px;padding:0 0;color:#666;height:35px;text-align:center;margin:0px 0px; font:bold 11px Arial; line-height:14px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}//]]>
</script>
</b:if>
<!--Related Posts with thumbnails End-->

Catatan: kode ber-warna merah yakni ukuran lebar gambar/foto. Sesuaikan dengan lebar halaman text area posting blog Anda, dapat diubah lebih kecil atau lebih besar.

2. Langkah berikutnya cara menciptakan Related Post dengan Gambar yakni dengan Copy + Paste instruksi berikut ini di atas instruksi <div class='post-footer'> atau di bawah instruksi <data:post.body/> yang kedua atau ketiga.

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;Related Posts :&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div class='clear'/>

Catatan: instruksi berwarna biru yakni jumlah related post, dapat diubah menjadi 8 atau bahkan 12. Sebaiknya empat saja, jangan terlalu banyak.

3. SAVE Template!

Jika tidak berhasil, coba pindahkan instruksi JavaScript di langkah No.1, yaitu instruksi yang diawali denngan <script type="text/javascript"> dan diakhir dengan </script>, pindahkan ke atas instruksi </body>

Demikian Cara Membuat Related Post dengan Gambar di bawah Posting Blog.