Widget Recent Post Animasi Dengan JQuery -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Widget Recent Post Animasi Dengan JQuery, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger JQuery, Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel Recent Posts, Artikel Tutorial Blogger, Artikel Widget, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Widget Recent Post Animasi Dengan JQuery
link : Widget Recent Post Animasi Dengan JQuery
Gambar dibawah ini

Widget Recent Post Animasi Dengan JQuery

 

Banyak versi widget recent post yang bisa anda gunakan untuk blog anda, mulai dari widget yang disediakan blogger sampai widget dari pihak ketiga. Diblog ini saja kira-kira terhitung sudah ada tiga versi widget recent post yang telah saya posting. Dan kali ini saya akan mengetengahkan cara menambahkan sebuah versi baru dari sekian jumlah widget recent post blogger yang ada. Widget recent post berikut selain memiliki effect animasi spy karena penggunaan script JQuery juga dilengkapi dengan thumbnail dan captions. Sebuah karya hasil pengembangan dari blogger Indonesia (Abu Farhan).

Nah seperti apa widget berikut silahkan lihat screenshoot disamping atau lihat live demo disini, jika anda tertarik tuk mencobanya, silahkan ikuti tutorial selanjutnya.

1. Setelah sig in pada blogger dengan account anda >>> pada dasbor klik rancangan >>> pada elemen laman >>> klik tambah gadget >>> HTML/JavaScript

2. Copy kode berikut dan paste pada kolom konten

<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://amatullah83.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>

Catatan: ganti home page dengan URL blog anda, kode lainnya masih dapat anda modifikasi lagi seperti background image, lebar dan tinggi thumbnail, lebar caption dll.

3. Klik simpan, dan simpan lagi.

Selesai. Mudah bukan? Selamat mencoba, semoga berhasil dan manfaat!

Demikianlah Artikel Widget Recent Post Animasi Dengan JQuery

Sekianlah artikel Widget Recent Post Animasi Dengan JQuery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Widget Recent Post Animasi Dengan JQuery dengan alamat link https://trikmitos.blogspot.com/2010/06/widget-recent-post-animasi-dengan-jquery.html