WIDGET posting terbaru, artikel terbaru, atau tulisan terkini dengan gambar thumbnail (recent post widget with thumbnail) sangat bagus dipasang di sidebar blog untuk meningkatkan pageviews.
Fungsi lainnya adalah sebagai internal link dan navigasi menu sehingga pembaca bisa berlama-lama membuka konten blog.
Berikut ini cara membuat widget posting terbaru dengan gambar, judul, dan ringkasan posting sebagaimana bisa dilihat di gambar ilustrasi dan recent post di blog ini.
Tampilan recent post hanya berupa judul mungkin kurang menarik perhatian. Jika dengan gambar, akan lebih "catchy". Untuk membuat latest posts berupa judul saja sangat mudah, semudah membuat recent post dengan thumbnail image.
Cara Membuat Posting Terbaru dengan Gambar Thumbnail
1. Layout > Add a Gadget > pilih HTML/Javascript
2. Isi judul dengan Latest Posts, Posting Terbaru, atau Artikel Terbaru saja.
3. Masukkan (Coy & Paste) kode berikut ini:
<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/>
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/>
>>> Kode warna merah bisa diubah sesuai dengan keinginan Anda.
4. Save!
Jika akan menampilkan posting terbaru berdasarkan Label/Kategori, maka ubah kode /feeds/posts/default?orderby dengan /feeds/posts/default/-/Label?orderby
Demikian Cara Membuat Posting Terbaru dengan Gambar Thumbnail agar lebih menarik dan meningkatkan jumlah kunjungan. (http://baticblog.blogspot.com).*
0 Komentar
Penulisan markup di komentar