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,,,,,,
Cara Membuat Widget Artikel Terbaru Berjalan Dari Atas Ke Bawah DI SIdebar
Label:
Blogspot
4 komentar:
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??
Makasih gan sharenya.... tapi pas tak coba kok gabarnya kagak muncul ya
keren banget gan widgetnya,,kalau buat wordpres gimana????
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.