Begini cara memasang related post otomatis ditengah postingan template contempo

Latar tutorial:

Ketika menjelajah blog blog para senior aku menemukan beberapa tutorial cara meletakan related post di tengah postingan. Akan tetapi segera aku mengerti tutorial itu lebih cocok di terapkan ke dalam template template lawas yang di buat dengan desain layout versi ke 2. 

update:

Ada instruksi pada pemasangan: cari kode <data:post.body/> dan di suruh hapus kode tersebut  lalu gantikan dengan kode berikut..bla bla bla...itu tandanya di dalam template tersebut memiliki beberapa kode yang sama, artinya ia masih desain dengan layout versi 2. 

Baca juga:

1. Revisi cara menambahkan related posts sederhana ke dalam blogger
2. Cara memasang related post simpel ke dalam template Essential blogger
3. Cara mengatasi gambar thumbnail blank di related posts

Sedangkan kalian harus tahu, template versi terbaru zaman now yakni varian terbaru template bawaan blogger hanya memiliki satu satunya kode <data:post.body/> tersebut yang kalau di hapus dan di ganti dengan kode lain akan mempengaruhi widget blog1.

 

cara memasang relatedpost ditengah postingan templaet contempo

Sedangkan widget atau gadget blog1 itu berperan menampilkan seluruh isi postingan secara sitematis, dan itu vital sekali. kalau kalian mencoba mengikuti instruksi para master yang belum sempat up to date itu, template versi terbaru kalian akan hancur. Berhati hatilah mengikuti instruksi tutorial blog yang telah berumur 5 tahun ke atas! Karena dunia telah berubah. Periksa versi template kalian terlebih dahulu sebelum menerapkannya.

Namun jika kalian ingin menerapkan pemasangan related post di tengah postingan ke dalam template dengan layout versi ke 3 disni aku akan berbagi triknya.

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:

1. Masuk kepengaturan/dasbor blogger
2. Pilih tema
3. 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 == &quot;item&quot;'>
<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='&quot;post1&quot; + 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 == &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>
<div id='bspostRelatedIn_title'>Baca Juga</div>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p>

<data:post.body/>

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

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.

Kalian tahu? Sesederhana itu bukan? Kalian bisa melihat contoh demonya. 

related post di tengah postingan template contempo blogger

||

\/

DISINI

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: