November 22, 2010

tutorial 3 : membuat recent post gerak-gerak




salam semue :]

hye my dearest readers ! hawau u? da lunch ke belom? jom lunch sesame nak? tapi uolls la belanje kite. hehe ! okehokeh before kite lunch kite nak ajar satu tutorial ni. ade sumone request macam mane nak buat recent post bergerak-gerak macam dekat sidebar kite tu?


ape tu recent post? contoh bule tengok macam dekat bawah ni :


ha da tau kan ape itu recent post gerak-gerak? comel je die gerak-gerak sendiri kan? okeh lets do it bebeh ! yaw !!

STEPS

1. log in => dashboard => design => page elements
2. add a gadget => HTML/JavaScript => copy paste code bawah ni :

<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:280px;
overflow:hidden;
float:center;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:262px;
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 =bilangan post;
home_page = "URL BLOG";
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. bule tuka bilangan post macam dekat link pink tu. letak la 4 ke 5 ke. ikut suke awak-awak ye.
4. jangan lupe masukkan URL BLOG anda sendiri dekat link merah tu. penting tau !
5. preview dulu ye :]
6. save !

tadaaa ! jadi tak? senang je kan? simple sangat-sangat. lagi satu if pandai nak tuka font size and colour bule la tuka. if tak reti jangan memandai nak tuka. nanti bertukar jadi huduh & kurang comel pulak. the most important thing is please credit to me :]

p/s : nak credit pade sihatimerahjambu and amiranajwa 4 the tutorial.

SELAMAT MENCUBA

ok bai 
Photobucket


0 kiss(s):

Photobucket
 
Template by suckmylolly.com