Cara Menambah Widget "Baca Juga" Di Halaman Post Blogspot

Menambahkan widget "Baca Juga" yang berkaitan dengan artikel yang sedang di baca pengunjung adalah salah satu SEO pada website sobat,  karna dengan adanya widget tersebut di dalam postingan akan membuat pengunjung tertarik untuk membaca postingan lain yang berkaitan dengan konten yang sedang pengunjung baca.

maka pada kesempatan kali ini akan saya bagikan cara menambah widget "Baca Juga" pada template Blogger.

Langsung aja sobat simak langkah langkah nya!


1. Masuk ke Blogger
2. Pilih Menu Thema &  klik edit HTML
3. Cari kode </head> lalu masukan style ini di atas nya

  <style type="text/css">
/*Artikel Terkait Tengah Postingan*/
.bacajuga {
position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0;width:100%
}
.bacajuga h4 {
color: $(label.color);
position: relative;
padding-left: 34px;
border:0px solid #DDD;
font-size: 20px;
background: $(label.bg.color);
font-weight: bold;
z-index: 1;
}

.bacajuga a {
font-weight: bold;
font-size: 14px;
display: block;
padding: 0;
}
.bacajuga ul {
max-width: 95%;
margin: 1.5em 0 1.5em 2em;
padding: 20px 20px 10px 40px;
position: relative;
border: 2px solid $(label.border.color);
}
.bacajuga li {
padding: 0px;
margin: .6em 0;
}
</style>

4. Cari lagi teks

<b:if cond='data:blog.pageType ==&quot;item&quot;'>
<data:post.body/>
</b:if>, 

jika menemukan banyak kode tersebut,  pilih lah yang No 2 paling akhir, hapus &  ganti kode <data:post.body/> nya dengan scrypt 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>

jika sobat ingin mengatur jumlah list post yang ingin di tampilkan,  tinggal sobat cari teks
"max-results=5"  &  ganti angka 5 dengan angka yang sesuai jumlah list post yang sobat ingin tampilkan.

Jika praktek awal mengalami ke gagalan,  coba sobat ulangi lagi cara nya dengan coba Mengganti teks <data:post. body/> yang lain nya,  karna teks tersebut jumlah &  letak nya beda beda di smua template.

Selamat mencoba  !!

Share this post