Tutorial | Cara nak buat recent post bergerak-gerak

Hello, today nak buat entry sikit pasal tutorial ye. Actually takdelah terror mana nak buat tutorial bagai. Tapi disebabkan haritu ada orang tanya macam mana nak buat recent post yang bergerak-gerak kat tepi tu. Tau tak yang mana satu. Ha, yang macam ni kat tepi belah kiri blog ni. Hehe

Selalunya kalau orang tanya macam ni I prefer bagi je link kat mana I refer bende tu kat diorang.Sebabnya, tak reti sangat nak buat tutorial bagai nie. But, kali nie, I really forget where did i find how to do that things. I try my best la bagi korang paham camne nak buat. Hehe


Firstly, pergi kat blog korang punya design setting and Add new Gadget. Letak la kat mana-mana yang korang rasa orang akan senang nampak korang punya Recent post yang bergerak-gerak macam comel tu. Eceh. Cakap nak lebih je.


Then copy code nie and paste kan kat add new gadget tu.

<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 yang anda mahu;
home_page = "http://url blog anda/";
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>


After dah copy sume, korang boleh la tukar kat tulisan yang kaler hijau tu dengan berapa banyak yang korang nak recent post tu. Macam I punya tu ade 5, boleh la nak buat 3 ke 4 ke tapi jangan la sampai sepuluh. Hehe, Banyak sangat tu kan ;) Tapi kalau nak boleh jugak. Hee~And tulisan yang kaler biru tu boleh tukar dengan url blog korang.

Kalau korang nie jenis yang pandai-pandai coding sume nie boleh jugak kalau nak tukar font size, colour sume. Tapi I tak reti lah pulak nak mengajarnye tu. Cetek ilmu sikit bab-bab coding nie. Ni pun boleh sikit-sikit je. Sorry kalau ade kekurangan and tak berapa nak faham. Thank jugak kat ohninie tolong sikit-sikit.Muah2 sikit ;D

Kan aku dah cakap aku tak reti coding bagai. Buruk gila kan. Tak reti la aku nak bagi berkotak-kotak ke ape ke code tu. Bukan tak try buat. Bopoluh dah kotiak den membuek eh. Tak jadi-jadi jugak. Hehe, Jadi la kann

Selamat mencuba ye ;)

Comments

paan said…
thanks utk tutorial ini... warna warni blog nie..
luvly mya said…
does it work?hehe..i'm scared if it doesn't work.thanks :)
paan said…
kena perbaiki lagi la cara bagi tutorial tu ye.. haha
luvly mya said…
paan : haha, tula. not perfect
Syafrizal said…
tutorial yang menarik hehe
tapi saya guna Wordpress
luvly mya said…
ouh, rasanya ni untuk blogspot je kot ;)
nad_azraq93 said…
alhamdulillah,,jumpa juga caranya,,,terima kasih ye...=)
syai.nia.sharif said…
SAYA AMBIL TUTORIAL NI. TERIMA KASIH! hihi
catchie comel said…
macam mana nak letak chat box kat blog eh???

Popular Posts