jQuery Accordion Recent Post with Thumbnail

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke “Rancangan – Elemen Laman”
Langkah 3
Tambahkan sebuah gadget baru dengan tipe “HTML/JavaScript”
Langkah 4
Masukan (copy paste) kode dibawah ini pada bagian konten:
<style type=”text/css”>
#acrec-post{
font-family:”Trebuchet MS”, Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.acrecpost-label{
background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em !important;
overflow:hidden;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #FFF;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.acrecpost-label:hover{
background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
#acrecpost{
overflow:hidden;
line-height:1.3em;
margin:1px 3px !important;
padding:2px !important;
border:1px solid #339DC6;
background-color:#FFF;
}
#acrecpost li{
height:65px;
padding:5px;
list-style:none;
}
#acrecpost .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#acrecpost .news-text{
display:block;
text-align:justify;
padding:0 5px 0 70px;
}
#acrecpost a{
text-decoration:none !important;
color:#FF0000;
}
#acrecpost img{
float:left !important;
margin-right:5px !important;
padding:4px !important;
border:solid 1px #339DC6;
width:55px !important;
height:55px !important;
}
</style>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”http://hensblog.googlecode.com/files/accrecpost-pack.js”></script&gt;
<script style=”text/javascript”>
var numposts = 10;
var numchars = 200;
</script>
<script src=”http://the-plick.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost”></script>

ganti tulisan bewarna biru dengan alamat blog kamu

Langkah 5
Simpan gagdet tanpa judul dan preview blog anda…

lebih jelasnya disini

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s