Membuat Recent Post Dengan Animasi jQuery

Text Resizer: Click for Resizer

Halo kawan semua,sebelumnya aku telah menulis tentang bagaimana membuat recent post dengan javascipt,kali ini kita akan belajar tentang membuat widget recent post dengan menggunakan variasi animasi jQuery.widget yang satu ini sedikit berbeda dengan versi sebelumnya.Sebelumnya saya minta maaf karena gk bisa ngasih demonya.Karena widget ini persis news post blog,untuk pemasangannya mudah saja kuq MAU?????Ok dech dari pada bengong langsung coba aja yach.PEACE 

• Seperti Bisa Log in dulu ke Account Blog Anda

• Masuk ke menu Rancangan lalu pilih elemen laman

• Klik "tambah gadget"

• Pilih HTML/Javascript

• Paste kode berikut ke dalamnya

<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 url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) 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://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
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://gantidenganalamatblogmu.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

• Kode berwarna merah ganti dengan alamat blog kamu

• warna biru ganti dengan jumlah post yang ingin ditampilkan

• Klik tombol simpan lalu lihat hasilnya!

Selamat mencoba semoga anda beruntung.....Eh,salah Semoga anda berhasil hehehehehe

Artikel Terkait:

jQuery

• Cara Memindahkan Gambar Dengan jQuery
• Chatbox Bergaya Panel Slide Vertikal dengan jQuery
• Cara Membuat Effect Page Peel Dengan jQuery
• Membuat Slider Zinmag Primus
• Membuat Daftar Isi Blog Dengan Efek jQuery Accordion
• Membuat Sliding Login/Register Form Panel di Blogspot Dengan jQuery
• Membuat Info Panel Slide Vertikal dengan jQuery
• Resize Font atau teks Dengan Jquery
• Membuat Back To Top Dengan Sentuhan jQuery
• Memasang Efek jQuery Image Zoom
• Membuat Slider Content Dengan Animasi jQuery

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Recent Post Dengan Animasi jQuery
Dalam Kategori : jQuery
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.