cara membuat relatedpost/artikel terkait di tengah artikel

Hello sahabat kuyalamban, salam hangat dari kami semoga anda merasa nyaman berada di blog ini.

seperti pada judul di atas, kali saya akan memberikan tutorial cara untuk membuat kotak artikel terkait di dalam postingan atau di tengah artikel yang kita buat.

langkah-langkahnya cukup mudah hanya perlu ketelitian saja saat mencari kodenya.
oke langsung saja ke cara membuatnya

1. masuk akun dasbor blog anda
2. pilih template
3. edit HTML
4. cari kode </head> lalu 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>

5. selanjutnya cari kode <data:post.body/>, hapus kodenya lalu ganti dengan kode di bawah

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

 selanjutnya klik simpan.

jika cara otomatis di atas tidak berhasil coba cari kode <data:post.body/> yang lain, karena cukup banyak kode seperti itu.

jika masih belum muncul juga maka sobat harus menggunakan yang manual, hehe..


cara manual memasang artikel terkait di dalam artikel

1. masuk edit HTML
2. cari kode </head> seperti tadi, lalu masukan kode di bawah 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>
<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>

 3.selanjutnya adalah ke menu buat artikel atau entri baru
4. pilih menu HTML bukan COMPOSE
5. masukan script di bawah ini di tempat yang anda inginkan, misalnya di awal, tengah atau akhir postingan

<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 sobat ubah tutorial menjadi label sobat dan max-results untuk jumlah yang di inginkan, tinggal ganti angka saja.

Tweet