Widget recent post pada blog dibuat sebagai navigasi pengunjung untuk mencari konten terbaru yang ada pada sebuah blog, untuk itu widget dibuat semenarik mungkin agar pengunjung tertarik untuk membuka konten atau artikel yang terpampang pada widget recent post tersebut. Pada artikel kali ini akan saya share Cara Membuat Widget Recent Post Dengan Gambar Thumbnail Agar Blog Terlihat Lebih Menarik.
Pada artikel sebelumnya pernah dimuat cara membuat recent post simple dan ringan, widget tersebut memang lebih ringan untuk blog karena berisi script yang tidak terlalu rumit dan tidak memuat gambar thumbnail. Tetapi bagi sebagian blogger menganggap widget recent post tanpa thumbnail kurang menarik, memang sah-sah saja apalagi jika blog tersebut merupakan blog berita atau blog review produk yang dituntut lebih mengedepankan gambar dalam menarik minat pengunjung blog.
Recent post dengan gambar thumbnail memang memiliki kelebihan dibanding yang tidak memuat gambar thumbnail, salah satunya yaitu widget lebih jelas dalam menampilkan informasi konten terbaru, selain itu widget juga terlihat lebih keren dan yang jelas bisa membuat pengunjung lebih nyaman berlama-lama di depan blog kita. kelemahannya mungkin loading blog agak terasa lebih lambat dibanding widget yang tidak memakai gambar.
Langkah Membuat Widget Recent Post Dengan Gambar Thumbnail
Sebenernya mudah sekali membuat recent post yang disertai gambar thumbnail yang ada didalam artikel atau konten, berikut langkah-langkahnya:#1. Login ke blogger anda
#2. Pilih Tata Letak / Layout -> Tambah Gadget / Add gadget -> HTML / Javascript
#3. Copy kode dibawah ini
<style type='text/css'>
img.recent_thumb {padding:1px;width:72px;height:72px;border:0;
float:left;margin: 10px 10px 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;margin: 10px 10px 5px 0px;padding: 0;font-size:13px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;}
.recent_posts_with_thumbs strong {font-size:12px;}</style>
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></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 = 150; </script>
<script src='http://www.kodeinternet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
Keterangan :
- Numpost = 5 (jumlah artikel yang tampilkan, silahkan anda ganti sesuai yang anda ingin tampilkan)
- Showpostthumbnails= true (menampilkan gambar pada wideget, jika gambar tidak ingin ditampilkan ganti false)
- Showpostdate = false ( menampilkan tanggal post artikel)
- Yang paling PENTING ganti www.kodeinternet.com dengan alamat url blog anda.
#4. Letakan / paste di dalam widget HTML/Javascript tadi
#5. Kasih judul widget pada kolom Title/judul
#6. Simpan / save
Selanjutnya silahkan cek tampilan blog anda, jika dilakukan dengan benar, widget recent post dengan gambar thumbnail sudah terpasang dan menampilkan artikel terbaru beserta gambarnya.
Baca Juga : Cara Membuat Widget Recent Post Simple dan Ringan
Sekian artikel Cara Membuat Widget Recent Post Dengan Gambar Thumbnail, semoga bermanfaat dan silahkan dicoba.
1 comments:
commentsTutorialRandom Post Blogspot Thumbnail artikel ini memang sangat lengkap dan sangat membantu sekali.
Replyalangkah lebih baik kalau ada pembatasan link yang tercreate. terimakasih mas .. numpang ijin belajar.
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish