MENAMBAHKAN WIDGET RECENT POST SUPER MANTAB DENGAN THUMBNAIL PADA BLOGGER

Artikel ini adalah lanjutan dari artikel sebelumnya yang juga berjudul hampir sama, yakini Menambahkan Widget Recent Post pada blogger. Bedanya, di sini  widget yang akan dipasang sedikit lebih variatif dan dijamin terlihat mantab, karena disertai Thumbnail (Gambar kecil khusus yang mewakili isi blog) dan deskripsi singkat (summary post) dari postingan terbaru yang ditampilkan.

Seperti yang telah dijelaskan sebelumnya, widget Recent Post adalah widget pada blogger yang menunjukkan kumpulan artikel yang terakhir dipublish atau baru aja dipublish. Dengan adanya widget ini, maka beberapa artikel yang baru kita publish akan terkumpul dalam suatu daftar dalam widget di sidebar blogger Anda. Pemasangan widget ini di blog Anda akan sangat bermanfaat dan bisa meningkatkan jumlah kunjungan pada halaman blog Anda. Selain itu akan membuat blog anda menjadi lebih berwarna dan tampak lebih menarik perhatian pengunjung untuk mengklik dan membaca isi dari posting yang disediakan. Contoh widgetnya adalah seperti contoh di gambar di bawah ini.

Contoh widget recent post with thumbnail

Oke jika Anda tertarik untuk memasang widget recent post mantab dengan thumbnail ini, bisa ikuti tutorialnya berikut ini:
1. Log in ke akun blogger Anda. Kemudian setelah masuk dashboard blogger masuk ke menu "Layout" atau "Tata Letak"
2. Klik Tambahkan Gadget pada bagian sidebar, lalu pilih HTML/JavaScript  

3. Setelah muncul jendela baru, copy semua kode di bawah ini dan paste-kan di bidang konten/isi. Klik simpan.

 <style type='text/css'>
img.recent_thumb {width: 90px;height: 70px;float: left;
margin-right: 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style><script style='text/javascript' src='https://googledrive.com/host/0BzPgmXeCwsMRcmlNOHhtaDNNMjA'></script><script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;

var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 50;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/>

Keterangan :

var numposts = 5 adalah jumlah post yang akan tampil dalam widget

var showpostthumbnails  untuk mengatur apakah akan menampilkan thumbnail atau tidak, jika tidak ingin tampilkan thumbnail, ganti tulisan "true" menjadi "false"

var displayseparator : untuk menampilkan garis sekat antar posting dalam widget. Jika ingin tampilkan garis pemisah, ganti menjadi "true"

var showpostdate > untuk pengaturan menunjukkan tanggal posting 

var showpostsummary > untuk pengaturan apakah ingin menampilkan summary atau tidak

var numchars > mengatur jumlah karakter awal posting yang muncul dalam summary. Bisa dikurangi atau ditambah.

Silahkan diedit sesuai kehendak. Intinya "true" berarti perintah tampilkan dan "false" perintah sembunyikan. Paste semua code di bagian isian konten.Kemudian klik Simpan.

4. Oke setelah Anda edit, silahkan cek kembali blog Anda. Jika berhasil, maka tampilan widget nya kurang lebih seperti di bawah ini. Bagaimana, cukup mantab, bukan.

widget Recent Post with Thumbnail

Dan selamat, blogger anda sekarang sudah terpasang widget Recent Post yang keren dan mantab. Tentunya bisa mempercantik tampilan blog Anda dan meningkatkan kunjungan pastinya. Oke sekian tutorial sederhana tentang menambahkan widget recent post mantab dengan thumbnail ini. Semoga bermanfaat. Terima kasih. Jangan lupa baca juga Cara Membuat Readmore Pada Postingan Blog

Code source : http://www.thebloggerguide.com/

Tweet