Tampilan widget ini mamang sama seperti widget yang pernah saya posting disini. Bedanya pada widget ini menggunakan Javascript dan CSS.Bloggerpluggins memang sudah lama menerbitkan widget ini. tak ada salahnya kalau kita bahas kali ini. pemasangannya pun juga cukup mudah, jadi bagi anda yang ingin mencobanya silakan saja. melalui posting ini akan saya share waktu meggunakan widget ini.
PEMASANGAN WIDGET
Langkah 1: Login ke account 'Blogger' anda
Langkah 2: Dari Dashbor, masuk ke 'Tata Letak', pilih 'Elemen Halaman'.
langkah 3: Tambahkan 'Gadget baru', dan pilih 'HTML JavaScript'
Langkah 4: Copy-paste kode dibawah ini :
<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 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;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 5;
var numchars = 100;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Langkah 5: Simpan perubahan, dan lihat blog anda...img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 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;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 5;
var numchars = 100;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Nah, sekarang di Blog anda sudah terpasang 'widget artikel terbaru dengan thumbnail'.
PENGATURAN VARIABEL
anda dapat mengatur variabel yang tersedia berikut ini:
var numposts: Jumlah posting yang ditampilkan
var numchars: Jumlah karakter yang ditampilkan
var showpostthumbnails: Gambar kecil ('true'=ditampilkan, 'false'=dihilangkan)
var displaymore: Link baca selengkapnya ('true'=ditampilkan, 'false'=dihilangkan)
var displayseparator: Garis antar posting ('true'=ditampilkan, 'false'=dihilangkan)
var showcommentnum: Jumlah komentar ('true'=ditampilkan, 'false'=dihilangkan)
var showpostdate: Tanggal posting ('true'=ditampilkan, 'false'=dihilangkan)
var showpostsummary: Ringkasan ('true'=ditampilkan, 'false'=dihilangkan)
var numchars: Jumlah karakter yang ditampilkan
var showpostthumbnails: Gambar kecil ('true'=ditampilkan, 'false'=dihilangkan)
var displaymore: Link baca selengkapnya ('true'=ditampilkan, 'false'=dihilangkan)
var displayseparator: Garis antar posting ('true'=ditampilkan, 'false'=dihilangkan)
var showcommentnum: Jumlah komentar ('true'=ditampilkan, 'false'=dihilangkan)
var showpostdate: Tanggal posting ('true'=ditampilkan, 'false'=dihilangkan)
var showpostsummary: Ringkasan ('true'=ditampilkan, 'false'=dihilangkan)
PENGATURAN JENIS POSTING
Script berikut ini memberi perintah menampilkan "posting terbaru pada Blog anda"...
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
anda dapat menggantinya dengan label/kategori posting anda, contohnya seperti ini:<script src="/feeds/posts/-/NamaLabel?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
Maka yang akan ditampilkan adalah "Posting terbaru pada Label" yang anda tuliskan. selain itu anda juga dapat menampilkan beberapa label sekaligus, contohnya seperti ini:<script src="/feeds/posts/-/NamaLabel1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<script src="/feeds/posts/-/NamaLabel2?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<script src="/feeds/posts/-/NamaLabel3?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<script src="/feeds/posts/-/NamaLabel2?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<script src="/feeds/posts/-/NamaLabel3?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
PENGATURAN STYLE
Berikut ini adalah kode CSS yang digunakan dalam widget
<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 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;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
Anda dapat mengaturnya seperti contoh berikut ini:img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 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;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 5px 5px 0;}
.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;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
maka thumbnail yang di tampilkan posisinya akan berada di Kiri.img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 5px 5px 0;}
.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;list-style:none;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style>
Jika anda memang sudah menguasai Javascript dan CSS maka, anda dapat memodifikasinya sesuai dengan kebutuhan anda. Demikian tadi coret-coret saya untuk widget artikel terbaru dengan thumbnail. semoga bermanfaat...
