Cara Membuat Related Post Otomatis - [Artikel Terkait]


Cara Membuat Baca Juga Di Blogger


Hai bro kali ini bloggku akan akan memberikan sedikit tips nih buat para blogger yaitu Cara Membuat Baca Juga Ditengah Postingan Blog atau biasa disebut Artikel Terkait.

Ok langsung saja ke tahap pembuatannya, tanpa basa-basi lagi, simak dengan seksama agar tidak terjadi kesalahan error saat mengedit template.

Cara Membuat Related Post Otomatis Ditengah Postingan [Otomatis]


  • Seperti biasa silakan masuk pada blog kalian masing-masing.

  • Masuk ke Tema => Edit Html => Cari kode </head> (gunakan Ctrl + F )

  • Copy kode dibawah ini tepat diatas kode </head>

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


  • Setelah itu cari kode <data:post.body/> kode tersebut lebih dari 1, pastikan kode  <data:post.body/>  yang ke dua, lalu ganti kode tersebut dengan kode yang dibawah ini. Jika tidak berhasil cari kode <data:post.body/> yang lainnya.

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


  • Jika sudah diganti sekarang simpan tema dan liat hasilnya.

Diatas adalah adalah cara membuat related post otomatis, bagi kalian yang ingin membuat related post secara manual kalian bisa ikuti tutorial dibawah ini.

Cara Membuat Related Post Otomatis Ditengah Postingan [Manual]


Related post manual sebenarnya caranya hampir sama dengan cara related otomatis, cuma ada beberapa yang berbeda, untuk lebih jelasnya silakan ikuti tutorial dibawah ini dengan seksama.

  • Pertama kalian buka blognya masing-masing

  • Masuk pada menu tema => Edit Html => Cari 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> 


  • Save tema.

  • Nah sekarang kalian copy kode dibawah ini pada setiap postingan artikel yang ingin dibuat related post, ubah terlebih dahulu penulisannya ke HTML.

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

Ganti # dengan link artikel, dan masukan judul artikel yang akan kalian tampilkan di related post.

Sedikit penjelasan, jika kalian menggunakan Related post otomatis maka kalian tidak perlu repot-repot menambahkan script pada saat membuat artikel, dan sebaliknya juga jika kalian menggunakan Related post manual maka kalian perlu menambahkan kode script pada saat membuat artikel baru agar related post kalian muncul.

Kekurangan dan Kelebihan


Kekurangan related otomatis adalah kita tidak bisa menyesuaikan letak related post sesuai keinginan kita dan sebaliknya juga jika kalian menggunakan Related post manual kalian bisa menyesuaikan letak/posisi related post bisa ditengah, awal atau bisa di akhir juga.

Kelebihan related otomatis adalah kita tidak perlu repot-repot menambahkan kode script pada setiap postingan artikel dan sebaliknya juga jika kalian menggunakan Related post manual kalian harus menambahkan kode script pada setiap postingan artikel yang akan kalian buat nantinya.

Nah bagaimana apakah kalian ingin memasang related post pada blog kalian ? Tunggu apalagi selagi gratis mending pasang.

Penutup.


Sampai disini pertemuan kita kali ini, semoga bisa membantu para kawanku semua, jika ada kata-kata yang kurang paham silakan komentar dibawah agar saya bisa menjelaskan dengan detail.

0 Response to "Cara Membuat Related Post Otomatis - [Artikel Terkait]"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel