Mungkin beberapa dari kalian ada yang masih resah apa itu widget related posts. Widget related posts yakni 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 yakni contoh kasatmata 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 supaya mampu saya ubah/modifikasi sesuai kebutuhan. Jika kau tertarik mengubahnya, mampu kau unduh terlebih dahulu, modifikasi, lalu unggah ke hosting milikmu. Jika tidak mau mengubah, mampu langsung pasang sesuai alamat JavaScript-nya. Alamat JavaScript-nya saya letakkan di http://intikali.org/js/rel-post.js. Jika kau ingin menaruhnya di template Blogger kamu, letakkan di kepingan "post-footer" isyarat berikut ini.<script src='http://intikali.org/js/rel-post.js' type='text/javascript'/>
<div class='related-posts-widget'>
loading...
</div>Terserah, kau mampu meletakkannya sebelum atau setelah "post-footer", tergantung kebutuhanmu.
Di Mana Letak "Post-footer"?
Jika kau 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 kawasan kode-kode itu, lalu tekan "Ctrl. F" untuk melakukan pencarian. Masukkan kata kunci "post-footer" hingga muncul ibarat gambar di bawah ini.
 |
| Mencari "post-footer" |
Letakkan isyarat widget di atas isyarat tersebut. Coba beberapa kali hingga kau menerima posisi yang pas. Banyak sekali "post-footer" yang ada di sebuah template Blogger. Setiap template Blogger memiliki susunan isyarat yang berbeda. Silakan bereksperimen sendiri dengan template milikmu.
Menghias Widget Related Posts dengan CSS
Jika sudah muncul widget-nya, selanjutnya yakni menghiasnya dengan CSS. Di isyarat sebelumnya related posts memiliki class="related-posts-widget", oleh alasannya itu untuk menghiasnya menggunakan selektor ".related-posts-widget". Berikut ini yakni 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 mampu mengubahnya sesuai yang kau butuhkan. Sesuainya dengan warna yang kau gunakan untuk blog kamu. Bagaimana? Mudah, 'kan? Selamat mencoba :)