Beberapa waktu lalu saya menulis Cara Memasang Gadget Pharse Code HTML pada Blog.
Salah satu triknya adalah saya menampilkan gambar kecil (thumbnail) di postingan terkait dengan menggunakan plugin thumblated related post. Beberapa sahabat bertanya mengenai cara merapikan tampilan gambar kecil tersebut karena secara default tidak sama ukuran lebarnya (ada yang kecil, ada juga yang besar). Dalam postingan ini saya berbagi caranya.
Namun, sebelumnya saya mengingatkan terlebih dahulu bahwa plugin buatan Shekhar Saxena ini cocok digunakan untuk blog yang postingannya didominasi gambar atau di setiap postingannya minimal mengandung sebuah gambar. Jadi, jika postingan Anda tidak berjenis itu, plugin ini tidak tepat karena akan muncul gambar kosong di postingan terkait.
Terlepas dari itu, berikut adalah tampilan gambar kecil yang dihasilkan plugin thumblated related post.
Cara membuatnya seperti di bawah ini:
1. Masuk ke blog wordpress.org Anda.
2. Pada fitur Plugins, klik Add New.
3. Ketikkan thumblated related post pada kolom yang ada lalu tekan Search Plugins.
4. Klik Install Now lalu tekan tombol Active untuk mengaktifkan plugin tersebut.
5. Pada fitur Settings, klik link Thumblated Related Posts.
6.Akan muncul template untuk mengatur tampilan postingan terkait. Template ini terdiri dari Header, Body, dan Footer.
7. Header adalah bagian di mana Anda bisa membuat judul, misalnya Postingan Terkait, Artikel Terkait, atau yang lainnya sesuai selera Anda. Semantara Footer, adalah tampilan bawah postingan terkait dan biarkan kode-kode yang ada sesuai bawaannya.
8. Yang perlu Anda edit adalah bagian Body. Untuk menampilkan gambar kecil seperti gambar di atas, copy dan paste kode berikut pada bagian Body.
<td valign=”top” width=”130″ padding=”5″>
<div><a href=”{link}”><img src=”{image}” width=”110″ height=”110″/></a></div>
<p style=”text-align: left;”><a href=”{link}”>{title}</a></p></td>
9. Pada bagian Configuration, pilih Max posts to show (misalnya 4) dan Excerpt length (misalnya 100).
10. Klik Save untuk menyimpannya.
11. Selanjutnya copy kode <?php boposts_show(); ?> dan paste di bagian Single Post dengan mengedit single.php. Penempatan kode ini sesuai selera Anda. Sebagai contoh, lihat gambar di bawah ini.
12. Setelah selesai, klik Update File.
13. Lihat tampilan postingan terkait Anda. Bila sukses, gambar kecil akan muncul di bagian tersebut.
Semoga bermanfaat bagi Anda.
0 comments:
Posting Komentar