ara memasang related post di tengah postingan ke dalam template terbaru blogger.

Cara memasang related post di tengah postingan ke dalam template terbaru blogger.

Kita mencoba memasangnya ke dalam template contempo atau bisa juga essential karena struktur keduanya nyaris identik. Related post ini aku perbaharui dan aku edit dari postingan blog Dewa Pokis yang tidak dapat di terapkan bergitu saja ke dalam template terbaru. Jadi lakukan saja langkah berikut:

Masuk kepengaturan/dasbor blogger
Pilih tema
Pilih edit HTML

1. CSS. Lalu letakan kode CSS berikut di atas ]]></b:skin:

.bspostRelatedIn{text-align: left;
padding: 15px;
margin: 30px 0;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 15px;
position: relative;}
#bspostRelatedIn_title{font-size: 16px;
margin: 0;
display: inline-block;
padding: 0 10px;
position: absolute;
top: -14px;
left: 10px;
background-color: #fefefe;
color: #7d7d7d;}
.bspostRelatedIn ul {
list-style: none;
padding: 3px 22px 0;
}
.bspostRelatedIn li{ border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: disc;
}
.bspostRelatedIn li:hover {text-decoration: underline;}
.bspostRelatedIn{text-align: left;
padding: 15px;
margin: 30px 0;

border: 1px solid #ddd;
border-radius: 3px;
font-size: 15px;
position: relative;}
#bspostRelatedIn_title{font-size: 16px;
margin: 0;
display: inline-block;
padding: 0 10px;
position: absolute;
top: -14px;
left: 10px;
background-color: #fefefe;
color: #7d7d7d;}
.bspostRelatedIn ul {
list-style: none;
padding: 3px 22px 0;
}
.bspostRelatedIn li{ border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: disc;
}
.bspostRelatedIn li:hover {text-decoration: underline;}

Keterangan: disc bisa dirobah menjadi: decimal untuk merubah gaya list related post secara keseluruhan.

2. HTML/XML/JS. Selanjutnya cari kode <data:post body/> hapus kode tersebut dan ganti dengan kode berikut:

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var Bacajuga=new Array,BacajugaNum=0,relatedUrls=new Array;function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var r=e.feed.entry[l];Bacajuga[BacajugaNum]=r.title.$t;for(var t=0;t<r.link.length;t++)if("alternate"==r.link[t].rel){relatedUrls[BacajugaNum]=r.link[t].href,BacajugaNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=Bacajuga[r]);Bacajuga=l,relatedUrls=e}function contains(e,l){for(var r=0;r<e.length;r++)if(e[r]==l)return!0;return!1}function printRelatedLabels(){var e=Math.floor((Bacajuga.length-1)*Math.random()),l=0;for(document.write("<ul>");l<Bacajuga.length&&l<20;)document.write('<li><a href="'+relatedUrls[e]+'">'+Bacajuga[e]+"</a></li>"),e<Bacajuga.length-1?e++:e=0,l++;document.write("</ul>")}
//]]>
</script> </b:if>
<div expr:id='"post1" + data:post.id'/>
<div class='bspostRelatedIn'>
<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&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<div id='bspostRelatedIn_title'>Baca Juga</div>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'><p>
<data:post.body/>
</p></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Lalu SAVE template.

Keterangan 1: Sebenarnya Kita tidak perlu menghapus <data:post.body/> tersebut, hanya saja karena saya ingin mempersingkat kode kodenya biar satu paket sekalian, makanya

saya ambil cara diatas. Karena jika tidak kalian harus bekerja dua kali:

Pertama meletakan kode warna cokelat di atas <data:post.body/>
Kedua meletakan kode warna biru di bawah <data:post.body/>
Jadi lebih baik saya satukan dan lebih ringkas.

Keterangan 2: Jika kalian ingin merubah list menjadi angka lihat bagian paling bawah CSS di atas yang saya merahkan, ganti tulisan disc menjadi: decimal.

Kesimpulan:

Jangan di terapkan sebelum kalian mengerti kebenarannya.

Related post di tengah postingan memiliki kelebihan:

Mengajak pembaca melihat psotingan lain lebih cepat
Mengurangi efek pentalan (bounce effect)

Kekurangan:

Menambah beban () write, kecepatan loading
Posisinya kadang akan memisahkan pragraf pragraf penting di dalam postingan, misal membelah iklan, masuk ke dalam untaian kode kode tutorial, jika konten kita adalah sebuah postingan tutorial.
Related post memang jadi berada di tengah postingan tapi postingan menjadi double akibat blog1 menjadi split dua....kacau kan...? Namun jangan kuatir tips ini tidak akan membuat blog satu menjadi double.