Cara Praktis Membuat Recent Post dengan Gambar Thumbnail pada Blog

Dengan adanya WIDGET RECENT POST atau POSTINGAN TERAKHIR pada sidebar blog, pengunjung akan dengan mudah untuk melihat artikel terbaru yang kita terbitkan pada blog. Dengan membuka artikel ini, mungkin anda ingin membuat WIDGET tersebut pada sidebar Blog anda. Karena itu saya akan share TUTORIAL CARA MEMBUAT RECENT POST DENGAN GAMBAR THUMBNAIL atau POSTINGAN TERAKHIR pada sidebar blog blogspot kepada anda yang hasilnya kurang lebih seperti gambar disamping tulisan ini.
Demi SEO, saya harus sedikit basa basi terlebih dahulu untuk mencukupi jumlah karakter minimal agar artikel ini SEO FRIENDLY hehe....
Widget Recent Post ini  sedikit bergaya dibandingkan dengan Recent Post standard bawaan Daeng Gugel. Selain menampilkan beberapa Judul Artikel Terakhir yang diposting sesuai keinginan, Widget RECENT POST DENGAN THUMNBAIL ini juga menampilkan gambar di samping Judul Artikel. Menarik bukan ???
Gambar yang ditampilkan adalah gambar yang ada di dalam artikel yang diposting. Jika Postingan atau Artikel tidak memiliki gambar, maka Recent Post dengan Gambar Thumbnail ini akan menampilkan gambar default yang kita inginkan / tentukan. Selain itu, kita juga bisa mengatur ukurannya agar sesuai dengan lebar sidebar blog dan mengatur banyaknya postingan terakhir yang akan ditampilkan.

Untuk membuatnya, caranya sangat mudah. Hanya dengan menambahkan element baru pada sidebar lalu memasukkan kode berikut pada kotak HTML/JavaScript elemen Laman.
Jika anda belum tahu cara menambahkan widget pada blog, silahkan baca tutorialnya pada artikel INI ( Bagian A. Menmbahkan Wideget ).

Silahkan gunakan kode di bawah ini dengan mengCOPY PASTE pada kotak HTML/JavaScript anda.

<table border="2" cellpadding="3"><tbody><tr><td><script language="JavaScript">
imgr = new Array();
imgr[0] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";
imgr[1] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";
imgr[2] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";
imgr[3] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";
imgr[4] = "https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png";

showRandomImg = true;
boxwidth = 356;
cellspacing = 8;
borderColor = "#f2f2f2";
bgTD = "#ffffff";

thumbwidth = 40;
thumbheight = 40;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";

icon2 = " ";
numposts = 5;
home_page = "http://wind7-free.blogspot.com/";
</script>
<script src="https://sites.google.com/site/bloggerbugis/js/RecentPostThumbnailBloggerbugis4U.js" type="text/javascript"></script></td></tr></tbody></table>

KETERANGAN :

https://lh4.googleusercontent.com/_yku_Hsa_Ht8/TZLU1u_fh5I/AAAAAAAAAk4/sM8Kf-9ZSa0/Gambar%20Recent%20Post%20Thumnail%20%28FILEminimizer%29.png adalah URL Gambar default yang akan ditampilkan Recent Post Thumbnail jika postingan tidak memiliki gambar. Jika ingin mengganti gambarnya, buatlah gambar anda sendiri dengan ukuran 120px X 120px ganti kode URL tersebut diatas dengan URL gambar anda. Jika tidak punya gambar, gunakan saja gambar milik BLOGGERBUGIS tersebut.

boxwidth = 356; adalah pengaturan lebar kotak Recent Post Thumbnail. Silahkan diganti untuk menyesuaikannya dengan lebar sidebar blog anda.

thumbwidth = 40; dan thumbheight = 40; dalah pengaturan besar kecilnya gambar yang ditampilkan Recent Post Thumbnail silhkan diganti angkanya menjadi lebih besar untuk membuat gambarnya lebih besar atau sebaliknya.

numposts = 5; adalah pengaturan untuk jumlah postingan terakhir yang akan ditampilkan Recent Post Thumbnail. Ganti angkanya menjadi lebih besar untuk menampilkan lebih banyak postingan terakhir atau sebaliknya.

http://wind7-free.blogspot.com adalah URL Blog wind7 free. silahkan diganti dengan URL blog anda.


Setelah mengedit kode di atas anda akan memiliki tampilan Recent Post Thumbnail yang sedikit berbeda dari Recent Post Thumbnail blogger blogspot lain. Tapi, jika anda menginginkan lebih, anda masih bisa mengedit lagi kode yang lain sesuai dengan keinginan anda.

Saya tidak akan BASA BASI lebih banyak lagi agar anda tidak bosan membaca hehehe...
Jika anda mendapat kesulitan memasang widget Recent Post tersebut di atas

Anda baru saja membaca artikel yang berkategori BLOGGER dengan judul Cara Praktis Membuat Recent Post dengan Gambar Thumbnail pada Blog. Anda bisa bookmark halaman ini dengan URL http://kang-enigma.blogspot.com/2011/09/cara-praktis-membuat-recent-post-dengan.html. Terima kasih!

Ditulis oleh: Kang Enigma - Selasa, 20 September 2011