Cara Mudah Membuat Related Post (Postingan Serupa) di Tengah Postingan Blog

Baca Juga

Bagi para blogger baru akan sedikit penasaran tentang bagaimana cara membuat related post di tengah artikel blognya? terlebih bagi template blog yang tidak menyediakan fitur tersebut, dengan membaca artikel ini setidaknya bisa membantu rekan pembaca semua bagaimana cara membuat related post di tengah artikel blog, bagaimana hal tersebut dapat mempercantik tampilan blog serta membat pembaca semakin nyaman

Faktor pengunjung blog / situs bisa berdatangan bukan hanya karena bahasa yang digunakan lugas serta mudah dipahami saja, melainkan faktor seperti banyaknya artikel yang serupa dan bermanfaatpun menjadikan pengunjung betah dan bolak-balik untuk mengunjungi blog / situs yang kita punya, tak kalah pentingnya seperti tools-tools yang disediakan dalam blog / situs kita membuat pengunjung merasa userfriendly.

Salah satu tools wajib yang harus disediakan oleh seorang publisher yaitu penempatan tools related post (postingan serupa). pada dasarnya penempatan related post dalam sebuah blog / situs merupakan hal yang bisa memudahkan pengunjung untuk membaca postingan serupa  kita lainnya, positifnya bagi pengujung adalah bertujuan menambah wawasan lainnya dengan mengarahkan ke postingan serupa yang mereka baca, dan untuk kita sebagai publisher agar pageview situs kita menjadi bertambah,

Lalu penempatan related post yang seperti apa agar pengunjung merasa userfriendly ? salah satunya yaitu menempatkan di tengah postingan. lalu bagaimana cara membuat related post dengan penempatan ditengah postingan ? mari simak langkah-langkahnya sebagai berikut :

1. Kunjungi dashboard Blog masing-masing dan lakukan edit HTML blog

Sebelumnya alangkah baiknya lakukan save template kita jika suatu saat terjadi sesuatu yang tidak diinginkan (opsional)

2. Cari kode  </head> pada halaman HTML blog yang akan kita edit dan letakkan kode javascript dibawah ini tepat di atas / sebelum kode </head>

Untuk kode Scriptnya bisa di ambil di sini

3. Selanjutnya cari kode ]]></b:skin> atau <style> (pilih salah satu) dan kemudian letakkan kode CSS dibawah ini tepat di atas atau sebelum kode ]]></b:skin> atau <style>

/* Related Post Style */
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

4. Yang terakhir cari kode <data:post.body/> dan ganti (hapus) kode tersebut dengan kode dibawah ini.

Kemungkinan akan ditemukan kode <data:post.body/>  lebih dari satu, semua bergantung pada masing-masing template blog yang dipakai, tugasnya silahkan ganti dengan kode dibawah ini dan dicoba satu-satu.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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>
<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>

5. Lakukan Save / Penyimpanan editing HTML blog dan lihat hasilnya.

Lakukan dengan hati-hati, saya tidak bertanggung jawab atas kesalahan yang terjadi pada editing HTML blog, DIHIMBAU !!! untuk melakukan Backup tema blog sebelum melakukan editing guna menghindari kesalahan / eror pada saat proses editing.