Cara Membuat Widget Artikel Terbaru Berjalan Dari Atas Ke Bawah DI SIdebar

Label:

Pengen punya widget Artikel Terbaru seperti di sebelah kanan posting blog saya ini???

Cukup mudah cara membuatnya.

Langsung aja deh ikuti step by step berikut :


1.Login ke akun blogger anda pastinya
2.Masuk ke halaman Dasbor
3.Pilih Rancangan
4.Tambah Gadget dan pilih HTML/JavaScript
5.Masukkan kode di bawah ini :


<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:575px;
}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#6d6666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#008000;
font-size:15px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#6d6666;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Old English Text MT,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Old English Text MT,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://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[1] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[2] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[3] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[4] = "http://img339.imageshack.us/img339/8822/71411271.jpg";
showRandomImg = true;

boxwidth = 290;

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 = 15;

home_page = "http://zakurabika.blogspot.com/";

limitspy=10
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>




6.Untuk pengaturan umum di bawah ini.

-> Ganti tulisan  http://zakurabika.blogspot.com/ dengan link blog anda.

-> Kode height:575px; untuk mengatur tinggi widget.

-> Kode background:#6d6666 untuk mengatur background widget.

-> Kode showPostDate = false; untuk menampilkan tanggal posting pada widget (ganti true jika ingin menampilkan tanggal ).

-> Kode numposts = 15; adalah jumlah postingan yang akan di tampilkan di widget.

-> Kode intervalspy=4000 adalah kecepatan pergantian postingan yang tampil di widget ( semakin besar angkanya maka akan semakin lambat )


Sesuaikan pengaturan widget tersebut dengan template anda.

Jika sudah,SIMPAN Wiget

Dan selesai deh,,,,,,

Baca Yang Di Bawah Ini Juga

4 komentar:

noeroel arashi mengatakan...

mmm kalo yang kaya di sebelah kiri yang tulisannya bergerak ke ats ke atas itu gmna ya???kan kalo yg sebelah kiri itu effect slide..kalo yang kanan kan berjalan ke atas menyambung terus itu bagaimana buatnya??

ACELLCOM Ngawi mengatakan...

Makasih gan sharenya.... tapi pas tak coba kok gabarnya kagak muncul ya

ace maxs mengatakan...

keren banget gan widgetnya,,kalau buat wordpres gimana????

Indonesia Online Business mengatakan...

terimakasih ini tulisan mantap, lama saya cari.

Posting Komentar

Terima kasih atas kunjungannya ke Blog Tribun Info.
Mohon di sertakan link sumber jika hendak mengkopi artikel blog Tribun Info.
Berkomentarlah yang baik dan membangun demi kemajuan bersama.

 
Tribun Info © 2010 | Designed by My Blogger Themes | Blogger Template by Blog Zone