Salah satu c
ara untuk mempercantik sebuah blog adalah
Membuat Recent Post dengan Animasi.
Cara Membuat Widget Recent Post dengan Animasi di Blog ini tidak lah susah. Hanya membuatnya di widget saja.
Tujuan
Cara Membuat Widget Recent Post dengan Animasi di Blog hanya untuk mempercantik tampilan saja. Jadi terlihat indah di mata. Kalau mau tahu
Cara Membuat Widget Recent Post dengan Animasi di Blog, yuk mari kita lihat hasilnya di samping kiri.
Inilah
Cara Membuat Widget Recent Post dengan Animasi di Blog:
1. Seperti biasanya, anda harus membuka Akun Blog anda sendiri (pinjam boleh asal disetujui, heheheh)
2. Pilihlah
Rancangan / Design pada Dasbor Blog Anda (seperti biasa juga nih)
3. Lalu tambahkan Widget (
klik add widget / tambah gadget)
4. Pilih mode
HTML/Javascript
5. Copy-lah script dibawah ini dan paste-lah pada kotak widget yang tadi anda tambahkan.
<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:299px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:270px;
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 = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://NamaBlogAnda.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>
<small><a href="http://kumpulan-adsen.blogspot.com/2012/04/cara-membuat-widget-recent-post-dengan.html" target="_blank">get this widget here</a></small></center></div>
6. Simpan Widget dan simpan template blog anda.
7. Lihat Hasilnya.
Catatan :
Selamat Mencoba. Semoga Bermanfaat :)
