cara membuat related post di blogger
Related post atau bisa juga disebut berita terkait. Dengan menampilkan related post di blog, tepatnya dibawah potingan akan dapat meningkatkan pageview secara tidak langsung. Selain itu, related post juga akan mempermudah pengunjung untuk menemukan portingan lainnya yang memiliki kesamaan tema atau topic. Disini saya akan membahas bagaimana cara membuat related post bergambar di blogspot.
Pada blogspot terdapat yang namanya label atau kalau di wordpress disebut category dan tags. Sebagai pengguna blogspot, Anda dapat menampilkan related post berdasarkan label. Jadi related post yang ada di blogspot akan menampilkan postingan terkait yang sama dengan label postingan yang sedang dibuka pengunjung. Related post yang akan kita buat kali ini sudah saya terapkan diblog saya yang blogspot, contoh penampakan hasilnya bisa Anda lihat pada gambar dibawah ini.
cara membuat related post

Cara membuat Related Post bergambar


  1. Pertama yang perlu Anda lakukan adalah login ke blogspot, lalu buka Template > edit HTML.
  2. Sekarang yang perlu Anda lakukan adalah mencari kode </head>, gunakan Ctrl+F untuk mempermudah pencarian.
  3. Tambahkan kode berikut, sebelum kode </head>. 
    <!--dec Related-post Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioUiqtaKUaatMnCbK6EAlaH4c_byUfqgDZ3O2qdAPVdSCZpkHITelBBMy62MYiIvbcRlXCIpWXQHMEQOTcZMW6WqbxXhyutUBSHV2_LD_IPy1lRIIjKLYmuTl1Bdy-831UfekjgEOaEQhX/s1600/images.jpg&quot;;
var maxresults=4; var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;<center>Berita terkait <data:blog.pageName/></center>&quot;;
</script>
<script src='https://jonocode.googlecode.com/files/relatedpos.js' type='text/javascript'/>
</b:if>
<!--Related post End by kaplik.com-->
  4. Kemudian Anda cari kode <div class='post-body entry-content'>, jika ada lebih dari satu maka cari yang dibawahnya ada readmore/continue read (itu juga kalau  Anda pakai theme yang menggunakan readmore).
  5. Letakkan kode berikut ini setelah kode penutupan readmore. 
    <!--call Related-post Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='beritaterkait'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script>
</div><div style='clear:both'/>
</div>
</b:if><div style='clear: both;'/>
<!--Related post End by kaplik.com-->
    Kode ini digunakan untuk menampilkan relatedpost dibagian yang ingin ditampilkan, jika Anda ingin menampilkannya ditempat lain boleh saja, sesuaikan saja dengan keinginan Anda.
    Contoh penerapannya diblog saya seperti ini, lihat gambar dibawah ini.
    peletakan kode related post di blogspot
  6. Untuk menyempurnakan penampilannya, Anda tambahkan kode CSS berikut sebelum ]]></b:skin>, Anda dapat memodifikasi kode berikut untuk menyesuaikan warna, jenis font atau yang lainnya. 
    #beritaterkait{border-top:1px dotted #DDD;overflow:hidden;margin:20px 0;padding:10px;width:auto;}
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;font-family:"trebuchet ms",sans-serif}
#related-posts a{color:#172232}
#related-posts a:hover{background:#C00;color:#FFF!important}
Itulah salah satu cara membuat related post di blogspot, masih banyak trik lainnya yang saya temukan setelah kurang lebih 3 bulan saya menggeluti blogspot. Nanti akan saya share tips optimasi blogspot yang lainnya. Ditunggu saja ya…