Memasang Widget Ultra Recent Post di Blog

Hello warga kampoeng blogger! Hari yang cerah untuk membahas mengenai tips tentang cara memasang widget recent post di blog. Tempo hari saya sudah membahas mengenai cara memasang widget recent post sederhana tanpa gambar dan dengan gambar. Pada kesempatan kali ini saya akan berbagi tips lagi mengenai cara memasang widget ultra recent post di blog. Widget ultra recent post ini adalah salah satu dari widget recent post yang di modifikasi sehingga terlihat sangat cantik bila dipasang pada blog yang berlatar warna biru muda dan putih. Di  bawah ini adalah tampakan widget setelah anda memasang widget ultra recent post di blog anda.

Anda tertarik untuk memasangnya di blog anda? Silahkan anda simak caranya berikut ini.

Memasang Widget Ultra Recent Post di Blog

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript

 <center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-z__swLRyeu2seodUSOqe_zI-vjRqdwE-XCdf8lkm5CDvE_ncLgml6l9TBNqDsOLW1Fj_VQVR0eUMWDFUwwqnUqNHeRGUnUkFu_Y_xcdifkk_sqwgvuoAmBlDjPTydZ0h1_sX9koj9DwN/s1600/recent+post.png" width="145" height="43" alt="Recent Posts" /></center>
<style type="text/css">
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:10px;    border:1px solid #ccc;
    border-bottom:3px solid #87CEEB;
    border-top:1px solid #ddd;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}
img.recent_thumb:hover {padding:1px;width:65px;height:65px;border:1px;float:left;margin:10px; }
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;    border:1px solid #ccc;
    border-bottom:3px solid #87CEEB;
    border-top:1px solid #ddd;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
#recsn {padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}

#recsn, #recsn a {color:#808080;}
.recent_posts_with_thumbs {float:left;width: 100%;min-height: 70px;margin: 5px 5px 5px 5px;padding:0;font-size:12px;}
</style>
<script style="text/javascript" src="http://the-kampoeng-blogger.googlecode.com/files/ultra-widget-recent-posts.js"></script>
<script style="text/javascript">
var numposts = 5;
var showpostthumbnails = true;
var showcommentnum = false;
var showpostsummary = true;
var displayseparator = false;
var showpostdate = false;
var displaymore = false;
var numchars = 100;</script>
<script src="http://bloganda.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

<div id="recsn" style="font-family: arial, sans-serif; font-size: 9px;">

Powered by <a href="http://thekampoengblogger.blogspot.com" title="Widget Recent Posts">Blogger</a></div>

<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="http://www.blogger.com/rearrange?blogID=1251654968934554442&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById("html1"));" target="configHTML1" title="Edit">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18"/>
</a>
</span>
</span>
<div class="clear"></div>

Step 3

Save

Catatan!
Jangan lupa untuk mengganti  http://bloganda.blogspot.com dengan URL blog anda sendiri

That's it!
Semoga bermanfaat.
Wassalam. 

Written by: Rysmah Zainal Arifin

The Kampoeng Blogger, Updated at: 9:33 AM

Posted in: Recent Post , Sidebar , Widget