Tutorial Cara Buat Widget Post Bergerak

click to zoom

Hai all..selamat pagi...hari ini koz akan berkongsi dengan korang ilmu baru yang koz baru dapat...Tutorial pada hari ini berkenaan membuat widget post entry bergerak...cara nak buat agak mudah...jadi ikuti langkah-langkah di bawah...

Langkah 1

Login blog >Layout> Page Elements>Add a Gadget>HTML/JavaScript

Langkah 2

Copy paste code di bawah

<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:220px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:200px;
padding: 2px 2px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:center;
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:10px;
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://img15.imageshack.us/img15/5439/noimagex.png";
imgr[1] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[2] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[3] = "http://img15.imageshack.us/img15/5439/noimagex.png";
imgr[4] = "http://img15.imageshack.us/img15/5439/noimagex.png";
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://NamaBlogKorang.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>


Langkah 3

Pada code ayat berwarna merah,masukkan nama blog korang

save dan lihat hasilnya...

Camat mencuba:D
Ranking: 5

Comments:31

10 June, 2010 12:26

Thanks so much for the sharing. Ive done it for my blog. I am still learning and this is really cool. Visit me sometimes at http://tiafatihah.blogspot.com

10 June, 2010 13:54

widget post bergerak ni yg mane?xphm..huhu~

10 June, 2010 14:05

@Gransazerwidget ini akan pamirkan setiap post yang ad kat blog anda dan ia akan bergerak dri bawah ke atas...nak tahu lbih lagi buat dulu nanti tahula ^^

10 June, 2010 14:22

wah!!!! tenkiu
ai mmg tgh carik tutorial ni dah lame
akhirnye jmpe gak
tenx a lot!!!

10 June, 2010 14:52

thanks koz...cantik sgt!! tapi background die mmg plain putih eh?kalau dapat buat kaler maching ngan blog lagi comei kan??

10 June, 2010 16:19

koz..qiqi wat dah...tp npe kua gmbr sme je ek..heheh

10 June, 2010 16:27

@CiK QiQi
no image la tu...cube amik code yg bru tu...koz dh update....

10 June, 2010 17:01

yg ne..yg kt ats nie ke

10 June, 2010 17:17

@CiK QiQiyup cik qiqi^^

12 June, 2010 08:57

thx yer! mmg dh lme nak cari benda ni...huhuhu..!

13 June, 2010 14:01

en koz yg kiut.. sy mau tanya lg sama kamu yg bijak sana.. mcm mne sy mau promot blog ku d blog mu??? pliss?? ada ape2 bayaran ke en koz kenekan? (bahasa melayu terabur, mtk maaf en koz) ^_^

13 June, 2010 14:04

ngeeee da buat da widget nie... da jd chantek blog ku..thnx to u en kozzzzzzzz

14 June, 2010 11:29

ta bgerak pn.. uwm :(

20 June, 2010 23:02

tengs.. :l:

23 June, 2010 07:44

salam..nak ty laa..sy dah try buat tp gambar tak kuar pon..sakit ati je..

23 June, 2010 16:16

nape kat blog aku x bergerak?huhuuh

05 July, 2010 13:54

jadi2!
best
thanks

07 July, 2010 16:02

np dh xgerak ek?
aritu gerak je

26 July, 2010 00:54

hohoho...thanx..
suke..suke..
jadi daa...

06 August, 2010 18:05

sy pny tak kuar ape2 pon :(

09 August, 2010 13:42

tq....memang lama dah cari.....u r d bez..sharing is caring...

02 November, 2010 15:51

farysa try buat lg skali tp np xbegerak?

27 December, 2010 21:17

ari tu bergerak..tibe2 x bergerak...knp ek..

04 January, 2011 17:28

da buat..menjadi..tinkiu!

23 September, 2011 17:50

x kua pape pon?

05 October, 2011 20:18

x jadi~pun~~kenapa??? erm sedih nie :(

07 November, 2011 19:17

x leh lah .. x kuar pon .. it's okey

09 December, 2011 20:45

nape x kuar.... sedeynye...

12 December, 2011 22:22

lokks like it cnt work at my blog,y eyh?

26 October, 2012 20:46

oh dear xbergerak pown post ini..knape ye...hurm...:(

Post a Comment

Komehlah dan klik G+ di atas sekali okey^^

 
Google PageRank Checker Powered by  MyPagerank.Net