Membuat Artikel Terkait Otomatis di Tengah Postingan Blog

Membuat Artikel Terkait di Tengah Postingan Blog - Salah satu cara agar bounce rate pada blog menjadi turun adalah dengan cara menyajikan artikel-artikel terkait yang sedang dibaca oleh pengunjung.  Ada artikel terkait yang disajikan dengan cara otomatis, dan aja juga yang disajikan dengan cara manual.

Pada artikel kali ini, saya akan membahas bagaimana cara membuat artikel terkait di tengah postingan blog secara otomatis. Misalnya saja, ketika pengunjung sedang membaca sebuah postingan tentang cara membuat artikel terkait di blog, maka otomatis artikel terkait lainnya yang membahas tentang 'membuat artikel terkait di blog' akan muncul dengan sendirinya. Anda tidak perlu lagi harus memasukkan link tertentu dengan cara manual, ini dapat mempersingkat tenaga dan juga waktu.

Cara Membuat Artikel Terkait  Otomatis di Tengah Postingan Blog

Artikel terkait otomatis ini saya dapatkan dari tutorialnya blog mas tamvan, dan terbukti work. Jadi mungkin saja Anda tertarik dengan tutorial kali ini, bisa Anda terapkan pada blog. Selain untuk mempercantik tampilan blog, artikel terkait juga dapat menurunkan bounce rate blog tentunya. Cara membuatnya adalah sebagai berikut.

1. Loggin ke dalam blogger. 
2. Pilih menu tema, kemudian klik edit HTML.
3. Cari kode </head> atau <head/>
4. Masukkan kode dibawah ini diatasnya atau sebelumnya dan save.

<style type="text/css">
/*Artikel Terkait Tengah Postingan*/
.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
.bacajuga ul{padding:11px 41px 0;list-style:none}
.bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
</style>
<script type="text/javascript">  
//<![CDATA[  
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 4=g f();2 9=0;2 6=g f();d z(m){c(2 i=0;i<m.u.5.3;i++){2 5=m.u.5[i];4[9]=5.v.$t;c(2 k=0;k<5.h.3;k++){b(5.h[k].A==\'y\'){6[9]=5.h[k].x;9++;C}}}}d B(){2 7=g f(0);2 8=g f(0);c(2 i=0;i<6.3;i++){b(!q(7,6[i])){7.3+=1;7[7.3-1]=6[i];8.3+=1;8[8.3-1]=4[i]}}4=8;6=7}d q(a,e){c(2 j=0;j<a.3;j++)b(a[j]==e)p M;p L}d D(){2 r=s.K((4.3-1)*s.I());2 i=0;n.l(\'<o>\');E(i<4.3&&i<F){n.l(\'<w><a x="\'+6[r]+\'" J ="G" v="\'+4[r]+\'">\'+4[r]+\'</a></w>\');b(r<4.3-1){r++}H{r=0}i++}n.l(\'</o>\')}',49,49,'||var|length|relatedTitles|entry|relatedUrls|tmp|tmp2|relatedTitlesNum||if|for|function||Array|new|link||||write|json|document|ul|return|contains||Math||feed|title|li|href|alternate|related_results_labels|rel|removeRelatedDuplicates|break|printRelatedLabels|while|20|_blank|else|random|target|floor|false|true'.split('|'),0,{}))
//]]>  
</script>

Jika sudah, selanjutny adalah tinggal meletakkan kode untuk membuat artikel terkait otomatis agar tampil disetiap artikel.

1. Masih di posisi edit HTML.Cari kode <data:post.body/>. Biasanya kode tersebut berjumlah lebih dari satu. Ganti kode tesebut yang kedua dengan kode dibawah ini.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='bacajuga'>  
<b:if cond='data:post.labels'>  
<b:loop values='data:post.labels' var='label'>  
<b:if cond='data:blog.pageType == "item"'>  
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>  
</b:if>  
</b:loop>  
</b:if>  
<b:if cond='data:blog.pageType == "item"'>  
<h4>Baca Juga</h4>  
<script type="text/javascript">  
removeRelatedDuplicates();  
printRelatedLabels();  
</script>  
</b:if>  
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Save template.