Cara Membuat Related Pos/Artikel Terkait di Tengah Artikel Postingan Dengan Tambahan Scrool Box

Cara Membuat Related Pos/Artikel Terkait di Tengah Artikel Postingan Dengan Tambahan Scrool Box

Halo sahabat blogger, menggunakan Related Post atau Artikel Terkait pada blog menurut saya wajib rasanya, karena hal ini dapat memberikan saran bagi pengunjung. Sehingga dapat mengundang ketertarikan pengunjung untuk membuka artikel terkait pada blog anda, agar dapat meningkatnya blogview pada blog anda.

Berhubung dengan hal tersebut, tampilan pada widget ini perlu diperhatikan agar bisa daya tarik para pengunjung blog, jadi kali ini saya akan membagikan tutorial Cara Membuat Related Pos/Baca Juga di Tengah Artikel Postingan Dengan Tambahan Scrool Box

Cara Membuat Widget Artikel Terkait Keren Di Blog

1. Buka Dashboard Blog sobat pilih Tema >> Edit HTML 

2. Tambahkan Kode CSS dibawah ini tepat sebelum kode </head> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
</b:if>
<style type="text/css">
/*Artikel Terkait Tengah Postingan*/
.bacajuga{width: 100%;position:relative;display:inline-block;border:2px solid #DDD;margin:20px 0;border-radius: 9px;}
.bacajuga h4{background-color:#dbd8e8;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:2px solid #DDD;border-radius: 9px;}
.bacajuga ul {height:150px;margin-top:10px;margin-left:0px;padding:0;margin-bottom: 10px;}
.bacajuga ul li {list-style:none !important;padding:7px 0;margin:0 20px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important; -webkit-margin-start:20px !important;}
.bacajuga ul li:first-child{padding: 12px 0 7px 0}
.bacajuga ul li:last-child{border:none !important}
</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>

3. salin 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 == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<div style=" text-align: left; height: 150px; overflow: auto; padding: 10px; width: auto;">
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
  </div>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>

4. kemudian carilah kode dibawah ini. tambahkan kode diatas tepat di atas kode di bawah ini. jika tidak muncul carilah kode <data:post;body>.biasanya kode kedua lalu salin kode di atas tadi dan kode dibawah ini lalu replace.

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