Cara Membuat Widget Related Posts di Blogger

Sudah lama sekali saya tidak membuat entri tentang tutorial Blogger. Kali ini saya membuat tutorial cara membuat widget related posts di Blogger. Tutorial ini adalah jawaban dari pertanyaan teman saya di grup Facebook Diskusi HTML Pemula. Dan baru saya jawab sebulan kemudian. Hal ini karena kesibukan saya di dunia nyata.

Mungkin beberapa dari kalian ada yang masih bingung apa itu widget related posts. Widget related posts adalah wigdet yang digunakan untuk memuat entri yang berhubungan dengan entri yang sedang dikunjungi berdasarkan label yang diberikan. Misalkan entri tersebut berlabel "curhat", maka widget tersebut akan memunculkan sejumlah entri yang terkait, yang berlabel curhat di blog kamu. Berikut ini adalah contoh nyata widget related posts di blog ini.

Related Posts

Cara Mudah Membuat Widget Related Posts

Widget dibuat berdasarkan JavaScript yang saya dapatkan dari orang lain. Saya sengaja menaruhnya di hosting saya agar bisa saya ubah/modifikasi sesuai kebutuhan. Jika kamu tertarik mengubahnya, bisa kamu unduh terlebih dahulu, modifikasi, lalu unggah ke hosting milikmu. Jika tidak mau mengubah, bisa langsung pasang sesuai alamat JavaScript-nya. Alamat JavaScript-nya saya letakkan di http://intikali.org/js/rel-post.js. Jika kamu ingin menaruhnya di template Blogger kamu, letakkan di bagian "post-footer" kode berikut ini.

<script src='http://intikali.org/js/rel-post.js' type='text/javascript'/>
<div class='related-posts-widget'>
loading...
</div>

Terserah, kamu bisa meletakkannya sebelum atau setelah "post-footer", tergantung kebutuhanmu.

Di Mana Letak "Post-footer"?

Jika kamu masih awam dalam dunia template Blogger, untuk mengetahui letak "post-footer" ikuti langkah-langkah berikut ini.

Pertama, masuklah dasbor Blogger kamu. Setelah itu klik "Template". Lalu pilih "Edit HTML". Setelah itu klik kursor pada tempat kode-kode itu, kemudian tekan "Ctrl. F" untuk melakukan pencarian. Masukkan kata kunci "post-footer" hingga muncul seperti gambar di bawah ini.

Mencari "post-footer"

Letakkan kode widget di atas kode tersebut. Coba beberapa kali hingga kamu mendapatkan posisi yang pas. Banyak sekali "post-footer" yang ada di sebuah template Blogger. Setiap template Blogger memiliki susunan kode yang berbeda. Silakan bereksperimen sendiri dengan template milikmu.

Menghias Widget Related Posts dengan CSS

Jika sudah muncul widget-nya, selanjutnya adalah menghiasnya dengan CSS. Di kode sebelumnya related posts mempunyai class="related-posts-widget", oleh karena itu untuk menghiasnya menggunakan selektor ".related-posts-widget". Berikut ini adalah CSS yang saya gunakan untuk menghias widget tersebut.

.related-posts-widget {
width: 100%;
}

.related-posts-widget li, .related-posts-widget img, .related-posts-widget a {
float:left;}

.related-posts-widget li {
background: #FFF;
border: 1px solid #ddd;
margin-bottom: -1px;
padding: 10px;
width: 279px;
margin-right: -1px;
}

.related-posts-widget li:nth-child(even) {
width: 278px;
}

.related-posts-widget h2 {
font-size: 14px;
margin: 20px 0px;
font-weight: normal;
}

.related-posts-widget img {
margin-right:10px;
}

Kamu bisa mengubahnya sesuai yang kamu butuhkan. Sesuainya dengan warna yang kamu gunakan untuk blog kamu. Bagaimana? Mudah, 'kan? Selamat mencoba :)