Cara Buat/Pasang Artikel Terkait/Related Post Gambar/Avatar di Blog

Cara Buat / Pasang / Tampil kan Artikel Terkait / Related Post dengan menggunakan Gambar / Avatar / Logo Mas Bos di Blog memang sudah sering di bahas oleh kebanyakan Blogger / Webster untuk mempercantik tempilan Blog / Web-nya disamping itu untuk memudahkan para Pengunjung melihat artikel terkait/related post apa saja yang di sajikan oleh Administrator web tersebut.

Sudah saya trial error/uji coba dan memang yang ini benar-benar berdasarkan label/kategori dari setingan kita sendiri. mengapa demikian...? Tentu saja, karena setiap artikel/posting yang kita buat sudah diberikan pengelompokkan/label berdasarkan tema/isi tulisan menurut Si "Empu" yang punya web tersebut.

Berbeda dengan penerapan Widget yang di sajikan oleh produk dari LinkWithin.com yang meng-adopsi dari Feed RSS yang sudah Kita daftarkan pada Produk Google yaitu : Feedburner.com. Oleh karena itu tetap saya tampilkan ke-duanya seperti pada gambar diatas / stelah Mas Bos baca keseluruhan artikel ini, maka akan menjumpainya "Artikel terkait" dan dibawahnya "Penjelajahan artikel"

Langsung saja kita simak dibawah ini...

Cara Buat/Pasang Artikel Terkait/Related Post Gambar/Avatar di Blog
 

1. Login ke blogger.com ID Mas Bos.

2. Klik Template » Edit HTML » Lanjutkan » Centang Kotak Expand Template Widget .

3. Masukkan kode HTML sebelum / diatasnya kode : ]]></b:skin>

Gunakan Ctrl + F untuk mempercepat pencarian dan meletakkan kode di bawah ini :

#related-posts{float:right;height:150px;margin-bottom:15px; outline: px solid #fff;border: px solid #ddd;margin-left: 0.5em ;}
#related-posts h3{font-family: Calibri;font-size:13px;font-weight:bold;color:#F0E68C;margin-bottom: 0.5em;margin-top: 0.5em;margin-left: 2em;padding-top: 0em;}
#related-posts ul{margin:5px;width:613px;padding-left:17px;list-style:none;display:block;}
#related-posts ul li{list-style:none;position:relative;float:left;border:0 none;margin-right:7px;padding:2px;width:90px;}
#related-posts ul li:hover{z-index:100}
#related-posts ul li:hover img{border:3px solid #BBB}
#related-posts ul li:hover div{font-size:10px;text-transform:Calibri;position:absolute;top:0px;left:-15px;margin-left:0;width:120px:background:#fff;}
#related-posts ul li img{border:3px solid #DDD;width:95px;height:100px;background:;display:block;padding:2px;}
#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}
#related-posts ul li .title{text-align:center;border:1px dotted #CCC;background:#fff;padding:5px 10px}

4. Selanjutnya masih di halaman yang sama, tekan Ctrl + F dan cari kode : <b:if cond='data:blog.pageType == &quot;item&quot;'> yang diakhiri dengan kode : <div style='clear both'/>, maksudnya copy pastekan kode dibawah ini diantara kode : <b:if cond='data:blog.pageType == &quot;item&quot;'> dan kode : <div style='clear both'/>

<br/>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Artikel terkait :</h3>&#39;;rn=&#39;<h3>Maaf...tidak ada artikel terkait</h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcytiuIK6BIgZdyl462qD-XWG1eTybL6dLDEai6PYhtqQ8WtEyPgk51-7er2yjfL3TcfglJh5x4ycgDny7KKRUg7jjntBNgXJA2T8R86cJSyQT4Dv4GYcFIWv_I69diuNQdVI9FejqnJE/s1600/R-LOGO.1.bmp';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<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=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>

Keterangan :

• Pada tulisan yang berwarna merah pada no.2 diatas dapat Mas Bos ganti sesuai dengan selera.
• Untuk posting blog /web Mas Bos yang berukuran lebar / width = "600 sampai 700px" maksimal gambar dapat muncul sejajar sebanyak 6  gambar dengan editan diatas, coba utak-atik aja sendiri pada bagian kode diatas ]]></b:skin> hasil yang sesuai dengan setingan template Mas Bos ya...

5. Pada petunjuk no.4 akan terlihat seperti ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Artikel terkait :</h3>&#39;;rn=&#39;<h3>Maaf...tidak ada artikel terkait</h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcytiuIK6BIgZdyl462qD-XWG1eTybL6dLDEai6PYhtqQ8WtEyPgk51-7er2yjfL3TcfglJh5x4ycgDny7KKRUg7jjntBNgXJA2T8R86cJSyQT4Dv4GYcFIWv_I69diuNQdVI9FejqnJE/s1600/R-LOGO.1.bmp';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<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=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear both'/>

6. Setelah semua sudah ter-copy paste dengan lengkap, lalu klik "Simpan Template" dan klik artikel / posting untuk melihat hasilnya, karena seting ini tidak muncul pada Beranda / Homepage, maka melihat / menge-ceknya melalui posting artikel Mas Bos.

Demikian semoga bermanfaat (",)

Kembali ke Menu Tutorial Blogspot