Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Widget Recent Post Dengan Thumbnail


Cara Membuat Widget Recent Post Dengan ThumbnailWidget Recent Post atau artikel terbaru umumnya ditempatkan diposisi sidebar. Sedangkan jenis widget recent post menurut sepengetahuan saya hanya ada 2, yaitu widget recent post dengan thumbnail yang statis/diam  (tidak bergerak) dan ada juga widget recent post dengan slide show/bergerak (model tayangan). Nah yang mau kita bahas pada tips blogging kali ini adalah membuat widget recent post yang statis tapi ada gambar/thumbnailnya seperti yang ada di sidebar blog ini, biar ngga susah-susah nyari contohnya he he. Cara membuatnya mudah saja koq, silahkan sobat ikuti langkah-langkahnya dibawah ini.

Cara Membuat Widget Recent Post dengan Thumbnail :
1.       Login ke dashboard blogger anda.
2.       Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).
3.       Copy kode CSS dan JavaScript dibawah ini dan paste pada gadget yang baru dibuat tadi.

<right><style> img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script> <script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>

4.       Simpan dan lihat hasilnya.
5.     Silahkan memodifikasi sendiri script ini untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.

Mudah saja bukan cara membuat widget recent post dengan thumbnail ini ? Kalo masih kesulitan juga silahkan tulis dikomentar OK ! Selamat mencoba dan salam blogger.


14 komentar untuk "Cara Membuat Widget Recent Post Dengan Thumbnail"

  1. kalau untuk popular post ada gk om?
    saya lagi cari populer post yang pake gambar

    BalasHapus
  2. @Adira Asuransi Kendaraan Terbaik Indonesia
    Untuk widget popular post sobat langsung pakai widget popular post bawaan blogpot aja, tidak perlu pasang script tambahan karena sudah otomatis.

    BalasHapus
  3. kalo untuk membuat ada kata-katanya gimana gan

    BalasHapus
  4. dapet versi beda lagi coba ahh

    BalasHapus
  5. Terimakasih recent postnya, semoga bertambah ilmunya.

    BalasHapus
  6. om... minta script twitt_a donk
    lucu nampaknya....

    BalasHapus
  7. tkans sobat infonya sangat bermanfaat

    BalasHapus