Keberadaan Related Post atau yang lebih terkenal dengan sebutan Artikel Terkait sepertinya telah menjadi kebutuhan dalam dunia blogger. Betapa tidak, setiap blog atau bahkan website yang saya kunjungi, selalu menampilkan widget Related Post ini pada bagian akhir setiap postingan yang ada. Salah satu fungsi dari widget ini adalah untuk memudahkan pengunjung dalam mencari artikel-artikel terkait dengan artikel yang sedang di bacanya.
Berikut ini saya akan coba uraikan tentang cara membuat Related Post with thumbnail (gambar kecil) dengan mempergunakan efek hoover. Related post yang akan kita buat ini nantinya agak berbeda dengan yang telah umum dipakai. Related post kita kali ini hanya akan menampilkan gambar-gambar yang ada dalam postingan blog (thumbnail), selebihnya bilamana mouse kita arahkan kepadanya, maka akan berganti menjadi judul postingan yang ada.
Berikut ini cara membuatnya :
Ok untuk membuatnya silahkan login dulu ke blogger masing masing,
kemudian seperti biasa klik di rancangan-->edit html jangan lupa
centang Expand Template Widget. Oh ya sebelum mengotak-atik template
blog usahakan membackupnya terlebih dahulu sebagai cadangan buat jaga-jaga jika terjadi hal hal yang tidak kita inginkan.
Kembali ke topik utama. pertama cari code dibawah ini :
]]></b:skin>
Untuk memudahkan pencarian bisa menekan ctrl + f. Kemudian tempatkan code dibawah ini tepat di atas code tadi :
Kemudian cari lagi code dibawah ini
<div class='post-footer'>
Tempatkan
code dibawah ini tepat dibawah <div class='post-footer'> tadi,
jika di template saya mempunyai 2 <div class='post-footer'>, maka
taruh di bawah <div class='post-footer'> yang pertama :
Simpan template anda dan silahkan melihat hasilnya, semoga anda puas.
Sumber Inspirasi : http://www.thedexwan.net/2012/01/membuat-related-post-thumbnail-dengan.html
Baca Juga Artikel Terkait Lainnya: