Cara Membuat Related Post di tengah Artikel Blog

Cara Membuat Related Post di tengah Artikel Blog

Jalak Ikal 09 August 0 komentar
Seperti yang kita ketahui dan tentu nya pada umum nya Related post trdapat di bagian bawah artikel,walaupun memang tidak sedikit para blogger yang menyimpan related post ini di bagian samping yaitu sidebar blog,walaupun begitu tentu nya tidak masalah di tempatkan dimana saja related post ini tergantung keinginan pemilik blog tersebut
Seperti pada artikel kali ini yaitu menempatkan Related Post di tengah Artikel,tidak hanya iklan saja yang dapat di tempatkan di bagian tengah artikel ini seperti kebanyakan para blogger,bahkan related post pun dapat di tempatkan di tengah artikel blog yang tentu nya mempunyai trik tertentu untuk menempatkan related post

Baca Juga : Cara memasang Iklan Adsense di tengah Postingan

dengan adanya related post di tengah artikel,postingan yang kita miliki akan terlihat propesional dan juga para pengujung blog dapat dengan mudah melihat artikel selanjut nya yang mereka cari di blog yang kita miliki

Cara Memasang Related post di tengah Artikel

Untuk membuat Related post di tengah artikel ini memiliki beberapa langkah untuk penerapan nya yang tentunya anda harus sedikit pokus dalam penerapan related post ini agar tidak terjadi kesalahan ketika penerapan nya
Untuk penerapan nya dapat anda ikuti langkah langkah berikut
  • Silahkan sobat masuk kebagian blogger dengan akun dan pasword 
  • Setelah itu silahkan klik Template yang berada di bagian kiri blogger
  • Kemudian klik Edit Html
  • Setelah berada di bagian edit silahkan cari kode </head> untuk memduahkan pencarian sobat silahkan tekan tombol Ctrl+F secara bersamaan,setelah ketemu silahkan sobat letakan kode berikut sebelum 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 silahkan sobat blogger cari kode <data:post.body/> biasa nya kode tersebut ada dua bahkan empat,untuk itu silahkan cari kode yang kedua kemudian hapus kode tersebut dan ganti dengan kode di bawah 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>
  • Setelah itu silahkan sobat Save Template dan lihat hasil nya
Untuk kode max-results=5 adalah jumlah artikel yang di tampilkan,silahkan sobat ganti sesuai yang di inginkan
Catatan : Untuk menjaga kesalahan patal silahkan Backup dulu kode template nya

Nah itulah cara membuat Related Post atau postingan terkait di tengah artikel blog,semoga artikel nya bisa membantu sobat blogger,selamat mencoba

Ratings: 
Posted by Jalak Ikal, Published at 09 August and have 0 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi