membuat Recent Post keren dengan Thumnail gambar

Tips kali ini adalah cara untuk membuat Recent Post / daftar list Artikel Terbaru disertai dengan thumbnail gambar.
Recent post keren ini hanya menggunakan metode Java Script jadi tidak perlu untuk menambahkan script ke dalam editing Template HTML.

Untuk contoh dari Recent Post blog keren ini lihat pada gambar dibawah

tertarik dengan widget Recent Post terbaru untuk blogger nya ?
silahkan langsung saja pasang pada halaman blogspot anda dengan cara seperti yang akan saya jelaskan dibawah ini:

Langkah untuk menambahkan Recent Post menarik dengan gambar di blog:

Step 1 : Pada halaman home blogger pilih Layout ( Tata Tetak )
Step 2 : pilih add gadgets pada lokasi dimana anda mau - Add Html / java script
Step 3 : masukan code dibawah ini kedalamnya

<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwAlciV_1CgF0U_9RsH-4XqaQRBiSfsdKJ12_GwcXsSmbJf63efi-3wbh1T9xfjZZU1W-p9S1HqJWKEUtRyMkYWYYhRhwxLQFyOMHsByP1ol59reRlUWhg5bKbFlQYJFMscGsp4yY54uOd/s1600/recent+post.png" width="145" height="43" alt="Recent Posts" /></center><br /><style type="text/css"><br />img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:10px; border:1px solid #ccc;<br /> border-bottom:3px solid #87CEEB;<br /> border-top:1px solid #ddd;<br /> border-radius:10px;<br /> -webkit-border-radius:10px;<br /> -moz-border-radius:10px;}<br />img.recent_thumb:hover {padding:1px;width:65px;height:65px;border:1px;float:left;margin:10px; }<br />.recent_posts_with_thumbs {float:left;width: 100%;min-height: 70px;margin: 5px 5px 5px 5px;padding:0;font-size:12px;}<br />ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px; border:1px solid #ccc;<br /> border-bottom:3px solid #87CEEB;<br /> border-top:1px solid #ddd;<br /> border-radius:10px;<br /> -webkit-border-radius:10px;<br /> -moz-border-radius:10px;}<br />.recent_posts_with_thumbs a {text-decoration:none;}<br />.recent_posts_with_thumbs strong {font-size:10px;}<br /></style><br /><script style='text/javascript' src='http://bluekut-widgets.googlecode.com/files/recent-posts-widget-with-images.js'></script><br /><script style='text/javascript'><br />var numposts = 5;<br />var showpostthumbnails = true;<br />var displaymore = false;<br />var displayseparator = false;<br />var showcommentnum = false;<br />var showpostdate = false;<br />var showpostsummary = true;<br />var numchars = 100;</script><br /><script src='http://www.masihpopuler.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script><br /><div class='clear'></div><br /><span class='widget-item-control'><br /><span class='item-control blog-admin'><br /><a class='quickedit' href='//www.blogger.com/rearrange?blogID=1251654968934554442&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=sidebar-right-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='Edit'><br /><img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/><br /></a><br /></span><br /></span><br /><div class='clear'></div>

Keterangan lebih lanjut :

URL www.masihpopuler.blogspot.com silahkan ganti dengan home page blogspot anda.

Step 5 : Save!

Anda baru saja membaca artikel yang berkategori Tips Blogging / Tips Populer / WIDGET dengan judul membuat Recent Post keren dengan Thumnail gambar . Anda bisa bookmark halaman ini dengan URL https://sisatruk.blogspot.com/2013/01/membuat-recent-post-keren-dengan.html .

Artikel Terkait Tips Blogging , Tips Populer , WIDGET

Ditulis oleh: Pramudya Ksatria Budiman - Rating : 4.5