Cara Otomatis Menambahkan Artikel Terkait Di Tengah Postingan

Cara Memasang Artikel Terkait di Tengah Posting Secara Otomatis

Tutorial Cara Menambahkan Artikel Terkait / Widget Baca Juga Berdasarkan Label Di Tengah Postingan Blog, pada tutorial kali ini saya akan memberikan trik agar artikel / postingan blog terdapat Artikel terkait / widget related post berdasarkan label di semua postingannya secara otomatis atau manual...

Sebelumnya artikel ini terinspirasi dari grup blogger yang menanyakan bagaimana cara membuat kotak artikel terkait / Baa Juga di tengah postingan blog, seperti pada website jalan tikus.

Saya coba ubek-ubek, setelah sekian menit akhirnya saya menemukan cara alternatif agar artikel terkait ini bisa berada di tengah postingan blog berdasarkan label..
Kalian bisa liat tampilan demonya di blog berikut ini Demo Tampilannya

Langsung saja ke tutorial cara pemasangan artikel terkait berdasarkan label di tengah postingan blognya gan...
Ada tida tutorial untuk menampilkan artikel terkait atau kotak baca juga / kotak artikel pilihan, silahkan pilih sesuai dengan keinginan kalian..

Pilih Tutorial Untuk Memasang Artikel Terkait Di Dalam postingan

1. Cara Otomatis, Cukup Satu kali pasang tampil di semua postingan
2. Tidak di semua artikel tapi otomaits menambahkan artikel terkait
3. Semuanya manual #RECOMMENDED

Tutorial Memasang Kotak Artikel Terkait Di Tengah Postingan Blog

• Seperti biasa, login dulu ke blogger.com

• Pilih Tab Template, Edit HTMLTerus Kalian Cari Kode </head>

• kalo sudah ketemu, masukan kode berikut di atasnya...

<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>

• Nah sekarang tinggal pasang kode html untuk menampilkan artikel terkaitnya

• Cari kode <data:post.body/> Ada lebih dari 1 kode itu, coba kalian ganti kodenya yang ke 2 dengan kode berikut..

<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>

Silahkan sesuaikan nilai berikut max-results=5 dengan jumblah artikel yang ingin di tampilkan..

• Kalo tidak tampil coba cari lagi kode ini <data:post.body/>

• Kira Kira Tampilannya seperti ini, cari aja kode yang hampir mirip

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

• Kalian Rubah Jadi Seperti Ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>

• Kalo sudah ketemu, tinggal save dan lihat hasilnya...

Sekarang bagi kalian yang ingin memasang Artikel Terkait / Baca Juga Berdasarkan Label Di Postingan Blog, tapi ingin menentukan letaknya sendiri entah itu di awal postingan, di tengah postingan atau di akhir postingan.

Gunakan tutorial berikut ini untuk memasangnya, tapi kalian harus manual memasaukan script dan mengisi label apa yang mau di masukan ke artikel agan...
langsung saja kita mula ke tutorialnya..

Cara Manual Memasukan Artikel Terkait Ke Postingan Blog

#Cara manual tapi otomatis menampilkan artikel dalam kotak baca juga.

• Sama Seperti Di Atas, Masuk ke Template, Edit HTMLTerus Kalian Cari Kode </head>

• Setelah Ketemu, Masukan Kode Berikut Di Atasnya

<style type="text/css">
/*Artikel Terkait*/
.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[
function bacajuga(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="'"+e.feed.entry[t].link[r].href+"'",l=e.feed.entry[t].title.$t,a="<li><a href="+n+'" title="'+l+'" target="_blank">'+l+"</a> </li>";document.write(a)}document.write("</ul>")}
//]]>
</script>

• Pemasangan scriptnya sudah selesai, sekarang kita tinggal memasang scrip di setiap postingan yang ingin di psang artikel terkait berdaasrkan labelnya..

• Silahkan masuk ke postingan yang ingin di pasang, terus pilih tab HTML, jangan console

• Kalo sudah masuk ke tab html di postingan, kalian copy kode berikut ke dalamnya, silahkan sesuaikan letaknya mau di letakan setelah kalimat / gambar apa..

<div class='bacajuga'> 
<h4>Baca Juga</h4>
<script src="/feeds/posts/summary/-/Tutorial?max-results=5&alt=json-in-script&callback=bacajuga"></script>
</div>

Silahkan ganti kata ini Tutorial Dengan Label Yang Ingin di tampilkan
Dan Sesuaikan juga angka iniresults=5 dengan artikel yang ingin di tampilkan...

• kalo sudah, tinggal di publikasikan n selesai deh :v

• Done n selesai

#Cara manual memasukan artikel kedalam kotak baca juga dan menempatkannya sesuka hati..

• Langkah pertama kita memasang CSS terlebih dahulu

• Masukan script dibawah ini tepat di atas kode </head>

<style type="text/css">
/*Artikel Terkait*/
.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>

• Terus save template

• Nah sekarang kita tinggal memasukan kode untuk menampilkan post di postingan dalam kotak baca juga secara manual.

• Masuk ke postingan yang ingin d beri kotak baca juga / artikel pilihan, masuk ke tab mode HTML, Jangan COMPOSE. Setelah itu copy kode dibawah ini dan masukan kedalamnya

<div class="bacajuga">
  <h4>Baca Juga</h4>
  <ul>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
    <li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
  </ul>
</div>

Silahkan ganti tanda # [Tanda Pagar] dengan link tujuan kalian.
Masukan HTML di atas di tempat yang kalian iginkan, ntah itu di awal d tengah / d akhir artikel..

kalo sudah tinggal lanjutkan menulis artikel / publikasikan post kalian.

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Cara Menambahkan artikel terkait di tengah postingan Blog. Keyword Terkait : Artikel Terkait di Tengah Postingan Blog, Cara Memasang Artikel Terkait di Dalam Postingan, Membuat Widget Baca Juga Di Tengah Postingan Blog