Cari Artikel

Selamat datang! di blog The Kampoeng Blogger , silahkan tinggalkan pesan di kolom komentar bila terdapat kode yang error.

March 09, 2013

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.

memasang widget ultra recent post di blog

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="http://4.bp.blogspot.com/-NUjmsRyazXI/UHR3vCheOeI/AAAAAAAACys/h32I-Xslsqo/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

0 comments :

Tinggalkan Komentar Anda di Sini:

Komentar yang mengganggu, berbau SARA, porno, mengandung iklan dan mencantumkan link aktif akan segera kami hapus.
Terimakasih atas perhatiannya.