Cara Membuat Widget Recent Post Gaya Grid Thumbnail - Aneh tidak teman saat melihat judul artikel ini? Biasanya kan kalau widget recent post itu kalau tidak tampilan standar, ada tampilan yang bergerak dengan thumbnail. Nah lalu bagaimana jadinya kalau tampilannya itu adalah bentuk grid?
Emang pada keren dan pintar - pintar ya para pakar blogger, terutama mereka yang mendalami hal CSS, pengkodean, dll. Kita, sebagai blogger juga bisanya cuma copy kode lalu di pastekan di tempat sesuai aturannya. Tapi ya segitu juga udah lumayan, ada usahanya. Hehe..
Oh iya, kalau bicara mengenai widget recent post saya rasa tidak perlu dibicarakan lagi ya apa fungsinya? Karena kalau tidak salah penjelasan tentang widget recent post ini sudah saya tulis di artikel sebelumnya tentang cara memasang widget recent post bergerak dengan thumbnail. Jadi, sekarang kita langsung saja ya ke langkah - langkah memasang kodenya. Oke?
Yuk ah mari perhatikan langkah - langkah pemasangan kode widget recent post bentuk grid dengan thumbnail.
- Pastikan anda sudah masuk ke blog masing - masing
- Kemudian anda pilih menu "Tata Letak" (Lihat gambar 1)
- Setelah itu anda klik "Tambahkan Gadget" (Lihat gambar 2)
- Kemudian anda pilih "HTML/JavaScript" (Lihat gambar 3)
- Lalu anda copy kode script di bawah dan paste kan di kolom gadget yang baru ditambahkan (Lihat gambar 4)
- Terakhir anda tinggal klik "Simpan" (Lihat gambar 4)
Kode Script :
<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 10;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 70;
var imgFloat = 'left';
var myMargin = 3;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://www.cari-ciri.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
Perhatikan :
Ganti tulisan yang berwarna merah dengan URL blog anda. Angka 10 (berwarna merah) adalah jumlah artikel yang akan ditampilkan, maka gantilah dengan angka yang anda inginkan.
Nah, setelah anda memasang kodenya dengan benar sesuai urutan yang saya tulis di atas, lihat bagaimana hasilnya. By: http://www.cari-ciri.com
Gambar 1 |
Gambar 2 |
Gambar 3 |
Gambar 4 |
Nah, setelah anda memasang kodenya dengan benar sesuai urutan yang saya tulis di atas, lihat bagaimana hasilnya. By: http://www.cari-ciri.com