Membuat Related Post Ringan dan Aman di Blogger

Membuat related post sederhana 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. Pada bagian Tema klik tombol Edit HTML
  3. Membuat related post sederhana di Blogger
  4. Temukan kode ]]></b:skin> dan letakkan kode berikut di atasnya
  5. #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(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/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}
  6. Temukan kode </head> dan letakkan kode berikut di atasnya
  7. <script>
    var relatedpoststitle=&quot;Related Posts&quot;;
    </script>
    <script src='https://code.maringngerrang.com/simple-related-post.js'/>
  8. 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 pilih kode selanjutnya)
  9. <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>

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).

Kamu bisa melihat contoh halaman demo pada halaman ini.

Membuat related post sederhana di Blogger

Mungkin itulah beberapa langkah memasang sebuah related post yang amat sederhana di Blogger. Cara di atas mungkin amatlah sederhana namun saya mencoba menjelaskan dengan serinci mungkin agar kamu dapat memahaminya. Kamu dapat menghubungi admin melalui halaman contact blog ini, jika sedang tidak sibuk admin akan segera menjawab tanggapan kamu. Atau agar lebih mudah dilihat kamu dapat meninggalkan komentar di bagian bawah halaman ini dengan menggunakan Disqus, kamu dapat berkomentar tanpa harus memiliki akun Disqus. Terima kasih dan sampai jumpa!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel