Menambahkan animated recent post widget

Assalamualaikum WR... WB....
Pada pertemuan kali ini saya ingin berbagi kepada kawan blogger semua tentang cara Menambahkan animated recent post widget. Dengan cara seperti ini tentu akan membuat blog terlihat lebih keren. Recent post tentu memudahkan pengunjung untuk melihat artikel2 yang lainnya yang ada di blog kita. Nah tentu akan lebih Bagus lagi bila Recent post itu dengan effek animasi slid seperti dibawah ini :

Berikut adalah cara-cara untuk menggunakan widget ini.

1. Dari dashboard > Rancangan > add a gadget > HTML/javascript
2. copy code berikut dan paste di ruangan HTML/javascript 

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://adjhaa.blogspot.com";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>
<small><a href="http://adjhaa.blogspot.com/2011/08/menambahkan-animated-recent-post-widget.html" target="_blank">ComunitybLog Smp 21 Siak</a></small>

Note: gantikan ganti yang berwarna merah dengan URL kamu atau dengan url blog anda..

3. Save dan lihat hasilnya.
4. Mari berkarya
 
Selesai. Semoga bermanfaat dan selamat mencoba.
Jangan lupa komentarnya ya??? Ok kawan... Wassalamu'alaikum WR.... WB.....

Anda sedang membaca Artikel tentang Menambahkan animated recent post widget Dan anda bisa menemukan Artikel Menambahkan animated recent post widget Ini dengan URL http://ferdi2end.blogspot.com/2011/12/menambahkan-animated-recent-post-widget.html, Anda boleh menyebar luaskan atau Mengcopy paste-nya jika Artikel Menambahkan animated recent post widget Ini sangat bermanfaat bagi teman-teman anda,Namun jangan lupa untuk mencantumkan Link Menambahkan animated recent post widget Sebagai Sumbernya. Terimakasih

Evolutions Backlinks ™

URL

Code For Forum

HTML Code <a href='http://ferdi2end.blogspot.com/2011/12/menambahkan-animated-recent-post-widget.html' target='_blank'>Menambahkan animated recent post widget</a>

Related Post: