Membuat Related Post Ringan dan Aman di Blogger

Membuat Related Post Ringan dan Aman di Blogger ― Related Post merupakan sebuah bagian yang selalu ada dari sebuah blog, dapat dikatakan bahwa related post adalah salah satu unsur yang cukup penting dan sangat direkomendasikan untuk disisipkan pada halaman blog sebab dengan adanya related post seorang pengunjung dapat mencari hal-hal lain yang terdapat pada blog tersebut sekaligus dapat membantu pemilik blog meningkatkan traffic blog tersebut.

Banyak cara yang dapat digunakan untuk menampilkan related post di blog, terdapat berbagai kode dan metode yang bisa menjadi pilihan, bahkan jika beruntung kamu dapat menampilkan related post dengan bantuan dari Google Adsense sehingga kamu akan diberikan beberapa fitur yang ditawarkan oleh Google Adsense. Namun tentu saja tidak semudah kedengarannya, Google Adsense hanya akan memberikan fitur related post untuk blog yang telah memenuhi syarat dan ketentuan yang telah ditetapkan oleh Google Adsense.

Akan tetapi pada posting ini saya tidak akan membahas lebih jauh tentang related post Google Adsense, namun saya akan mencoba memberikan salah satu cara yang bisa kamu gunakan untuk menampilkan related post pada blog. Yaitu dengan menggunakan kode javascript. Kode related post ini memiliki beberapa kelebihan yang mungkin kamu sukai, diantaranya mempunyai tampilan yang simpel dan sederhana, ringan, serta mudah diatur dengan hanya memodifikasi kode CSS.

Pertama-tama saya sarankan kepada kamu untuk melakukan backup terlebih dahulu terhadap keseluruhan kode blog, barangkali tampilan related post ini tidak sesuai dengan keinginan kamu, maka akan lebih mudah untuk mengembalikan perubahannya. Cara terbaik backup di Blogger bisa kamu baca di sini.

Membuat Related Post Sederhana dan Aman

Untuk membuat related post yang ringan dan aman di Blogger, kamu bisa mengikuti langkah-langkah berikut ini:

1. Buka Blogger
2. Buka menu Tema kemudian klik simbol titik tiga untuk membuka pilihan tambahan lalu pilih Edit HTML

3. Temukan kode </head> dan letakkan kode berikut di atasnya

<script>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://code.maringngerrang.com/simple-related-post.js'/>

4. Selanjutnya temukan kode <data:post.body/> dan letakkan kode berikut di bawahnya (jika ada lebih dari 1, coba pilih yang kedua dari atas yang kamu temukan, kalau gagal, undo pilih kode selanjutnya)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</b:if>

5. Selanjutnya klik tombol ikon Simpan, kemudian klik tombol kembali
6. Pada bagian Tema klik tombol Sesuaikan

7. Kemudian pada pilihan Lanjutan klik Tambahkan CSS

8. Kemudian tambahkan kode berikut pada kotak teks yang ada. Menu ini kadang tergantung dari template yang kamu gunakan, jika menu "Tambahkan CSS" tidak dapat kamu temukan silakan buka menu Edit HTML lalu temukan kode ]]></b:skin> dan letakkan kode berikut di atasnya

#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0973CF;font:12px Verdana}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiekudSeWyGwLWkeeuWtd2So-ccvxv6BAZOBNYWsS8QbV-OcjBuulSD0nSLSPOOa_dzq7AC_riaZrZgNsmdfkUQFIvYRzXqqTpIl10idjqNNrH9YPJv2Oi3o80ke24wYqsV9dW3esWkVuw/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

9. Setelah itu klik "Terapkan ke Blog"

Penutup

Setelah semuanya selesai, silakan periksa salah satu posting yang terdapat di blog kamu, kemudian scroll untuk menampilkan bagian paling bawah dari halaman posting tersebut. Jika berhasil, maka kamu akan menemukan beberapa posting yang mempunyai label sama dengan posting yang kamu buka.

Related Post nya tidak tampil!?

Jika gagal, maka ada beberapa hal yang bisa menjadi penyebabnya. Pertama, kesalahan penempatan kode langkah ke-5, temukan kode <data:post.body/> yang tepat lalu periksa lagi.

Kedua, belum ada posting lain dengan label yang sama, artinya postingan di blog kamu mungkin terlalu sedikit atau tidak ada posting lain dengan label yang sama dengan posting yang kamu buka, coba buka posting yang lebih populer di blog kamu (posting dengan label terbanyak).

Untuk mengetahui bagaimana hasil akhirnya, kamu bisa melihat contoh halaman demo pada link halaman di bawah ini

Halaman Demo

Itulah langkah-langkah yang bisa kamu lakukan untuk memasang sebuah related post yang simpel dan sederhana pada blog di Blogger. Cara di atas mungkin sebenarnya cukup mudah dan singkat, tetapi saya mencoba menjelaskan dengan serinci mungkin dan semudah mungkin dipahami. Semoga pembahasan dalam tulisan ini bisa bermanfaat dan memberikan wawasan baru untuk kamu. Apabila ada hal-hal yang kurang jelas, silakan sampaikan pertanyaan kamu pada kolom komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!