Menambahkan Related Post Otomatis Di Tengah Artikel

Struktur Related Post.

Jika kalian yang masih belum mengetahui related post dan apa kegunaan nya, disisni saya akan menjelaskan apa itu related post dan kegunaannya.
Related post yaitu sebuah tautan yang yang berisi artikel-artikel terkait, dan kegunaannya selain dari tampilan yang bagus, related post berfungsi sebagai backlink penunjuk jalan ke artikel-artikel lain untuk mempermudah si pembaca dalam mencari artikel terkait.

Maksud dari artikel terkait ini akan memudahkan pengunjung blog anda membaca artikel yang ia sedang baca dengan artikel lainnya yang terkait dengan ia baca saat itu, selain itu juga visitor blog anda akan cepat naik karena otomatis pengunjung blog anda akan menjelajahi blog anda.

Berikut contoh tampilan related post dalam sebuah artikel.

Dari pada penasaran simak tutorial berikut.

Cara Membuat Related Post Otomatis Di Tengah Artikel atau Post:

Saran : Silahkan memback-up dulu template blog anda untuk menghindari kesalahan atau agar tidak terjadi yang tidak diiginkan dari widget ini!

1. Buka alamat Blogger.com kamu dan Login.
2. Jika sudah masuk, pilih Template - Edit HTML.
3. Selanjutnya Cari kode </head> (dengan cara CTRL+F)
4. Kalo sudah ketemu masukkan kode berikut di atas 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>

Langkah selanjutnya tinggal memasang Related Post nya.

• Tetap dalam tampilan HTML, cari kode <data:post.body/>
• Biasanya menampilkan lebih dari 1, pilih yang paling akhir. atau paling tidak mirip seperti kode dibawah.

• Lanjut jika sudah ditemukan, ganti kode <data:post.body/> dengan kode berikut 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>

• Langkah terakhir Simpan Template , dan refresh artikel anda.

Jika kode di atas tidak mau menampilkan related post, ganti kode tersebut dengan berikut 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>

• [message]
• Catatan
• untuk mengatur tampilan maksimal pada related post, ganti max-results=5 warna merah dengan keinginan anda.

Selamat artikel anda telah berhasil ditambahkan related post di dalam setiap artikel mu, semoga tutorial tersebut dapat bermanfaat.

Demikian Artikel Tentang Menambahkan Related Post Otomatis Di Tengah Artikel

Sampai disini artikel Menambahkan Related Post Otomatis Di Tengah Artikel yang dapat kami sampaikan, semoga bermanfaat dan menambah pengetahuan untuk para pembaca.
Kami mohon maaf apabila ada kesalahan ejaan atau penulisan kata maupun kalimat yang kurang jelas dan dimengerti, karena kami hanyalah manusia biasa yang tak luput dari kesalahan dan kami juga sangat mengharapkan kritik dan saran dari para pembaca demi kesempurnaan artikel ini.
Sekian artikel dari kami terima kasih telah berkunjung.

loading...

Tweet

aris arianz

Bukan master apalagi hacker, saya hanya orang bodoh yang selalu berusaha untuk lebih baik.