Kalau korang perhatikan pada sidebar sebelah kiri, korang akan nampak satu widget yang bertajuk "Recent Post" yang bergerak-gerak kan? Hari ni saya nak buat satu lagi nota untuk diri saya sendiri dan ingin kongsikan kepada sesiapa sahaja yang sudi lawat blog ni bagaimana cara-cara untuk buat widget seperti ni..
Cara-caranya ialah:
1. Masuk kat dashboard>design>add gadget>HTML/java script
2. copy script kat bawah ni dan masukkan pada ruangan content
<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;
margin-bottom:-20px;
padding:0px 0px -20px 0px;
height:350px;
}
#spylist ul{
width:270px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:252px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#FFFFFF;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#A32929;
font-size:12px;
height:0px;
overflow:hidden;
margin: 0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:0px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:0px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:0px;
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 = " ";
showPostDate = false;
showcomments = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://URL korang.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://sites.google.com/site/testingsahaja/recentpostslide.js?attredirects=0&d=1" type="text/javascript"></script>
</div>
3. Edit spylist ul(lebar kotak) dan spylist il(lebar tulisan) mengikut kesesuian korang sendiri
4. Korang boleh tukar saiz gambar mengikut kesukaan korang sendiri dengan mengubah nilai thumbwidth dan thumbheight mengikut kesukaan korang sendiri..
Setakat itu sahaja untuk nota hari ini hehehe... Kepada sesiapa yang berminat boleh buat latihan ye hehehe...
Cara Membuat Slider Recent Post Pada Sidebar
Tuesday 29 June 2010
Labels:
Recent Post Bergerak,
Slider,
Tutorial,
Widget bergerak
Subscribe to:
Post Comments (Atom)
22 comments:
erm pe function die ea?bleyh trg detail?
thanks 4 the info
function dia sama macam letak banner kat sidebar tu gak tapi ni nampak cantik sikit kalau nak dibandingkan dengan banner yang duduk statik je.. tapi ini bukan untuk banner tapi ntuk show post kita yang lepas-lepas itu je kot.. hehe..
sama-sama hehe..
KENAPA SAYA BUAT TAK JADI EK? ERK..
url korang tu dah tukar pada url awk ke??
boleh juga ni, nak pasang kat blog yang satu lagi..
terima kasih sangat..
nice tutor.. :)
sama2 hehe..
terima kasih hehe..
dah dapat...tq bnyk2...sila lawat http://villakejora.blogspot.com
dah lawat hehe...
thanx bro!
sama-sama hehe..
nk try buat jugak la nanti..thnx mat din...
mat din..cm ne nk buat copy link banner kita..bagi tunjuk ajar skit..
waa pernah wat.. tp tak kuor gambo..nak cube yang nih..kalo tak jadi gak memang sadiss bangat!
maksud awk nak letak kod dalam kotak ke?? kalau ye awk tengoklah sini.. http://maribinablog.blogspot.com/2009/10/meletak-kod-banner-pada-scroll-box.html promote nescafe lak hehehe..
trylah.. saya try kluar je gambar hehe...
salam, tq krn sudi kongsi ilmu yg payah orang nak bagi..
sama-sama hehe..
nice tutorial. . .tq..
sama-sama hehe..
Post a Comment