Cara Membuat Artikel Terkait dengan Mudah

                                  





Artikel Terkait Sangat Penting untuk Blog dan Artikel Terkait Bisa Mengurangi Bounce Rate pada Blog . dan Artikel Terkait Bisa Membuat Pengunjung Berlama- lama di blog jika Blog tersebut Membuat Artikel yang Menarik dan Berkualitas Bagi Pengunjung Blog Tersebut . jadi disini saya akan Berbagi Tentang Cara Membuat  Artikel Terkait dengan Gambar Mudah . Memang Sudah Banyak Blogger diluar sana yang Mengulas Tentang cara Membuat Artikel Terkait dengan Gambar tapi saya ingin share kembali dan Menginginkan Trafik yang lebih Banyak . Artikel Terkait Dengan Gambar ini Memang Sangat Bermanfaat karena jika Kita Memasukkan Gambar dan Judul Menarik Bagi Pengunjung Blog Pada Postingan Tersebut saya yakin Pengunjung Tersebut Semakin Senang dan nyaman untuk Menelusuri satu persatu Artikel anda.

Saat nya Kita Ke Langkah Langkah nya,,

1. Seperti Biasa anda harus Login Terlebih Dahulu di Akun Blog anda di www.blogger.com

2. Setelah Login silahkan Masuk Ke Menu Template lalu Klik Edit HTML > Lanjutkan > Centang Expand Widget Template .

3. Lalu Cari Kode dibawah

]]></b:skin>

4. Setelah Ketemu Taruh kode Berikut Diatas Kode ]]></b:skin> 

 #related-posts{float:left;height:160px;margin-bottom:10px; outline: 1px solid #fff;border: 1px solid #ddd;background: #f9fafb;}#related-posts h3{font-family: Francois One;font-size:20px;font-weight:400;color: #222222;margin-bottom: 0.5em;margin-top: 0.5em;margin-left: 0.5em;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:11px;padding:2px;width:86px;}#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:7px;text-transform:capitalize;position:absolute;top:20px;left:-15px;margin-left:0;width:130px}#related-posts ul li img{border:3px solid #DDD;width:80px;height:80px;background:#FFF;display:block;}#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}

5. Setelah itu cari kode <data:post.body/> , biasanya kode  <data:post.body/> di beberapa template ada 3-4 jadi coba satu persatu kodenya .

6. Setelah Ketemu Pastekan kode dibawah ini pada kode diatas :

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><script type='text/javascript'>var ry=&#39;<h3>Artikel Terkait :</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script><script type='text/javascript'>//<![CDATA[var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';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'/></b:if>

Kode yang Berwarna Merah = Jumlah Artikel yang ingin di Munculkan .

7 . Setelah itu Simpan Template anda .