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

Cara Buat/Pasang Artikel Terkait/Related Post ber-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 .
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='http://1.bp.blogspot.com/-gCH3UzATuGc/UGu1DreDrII/AAAAAAAAAPo/taKt5569cMg/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='http://1.bp.blogspot.com/-gCH3UzATuGc/UGu1DreDrII/AAAAAAAAAPo/taKt5569cMg/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

3 comments:

Blog Auto Approve Comments with Chapta (Blog komentar tampil setelah mengisi kode / verifikasi gambar terlebih dahulu).

Mohon menuliskan komentar Mas Mbro Bos dengan bahasa yang baik, tidak mengandung Sara, Pornografi, dan Provokasi Pihak lain.

Terima kasih atas kesediaan Mas Mbro Bos dimanapun berada (",)

Salam,

Follow by Email