Tutorial : Cara Nak Buat Gambar Bergerak (scrolling)

haii semuaa. in sya Allah tutorial ketiga ifah kali nih ifah nak share+ajar korang macam mana nak buat gambar bergerak macam yang di sidebar ifah tuh. tak paham macam mana? hah, kat bawah nih ifah bagi contoh gambar yang bergerak tuh. so, bagi sape-2 yang berminat, ikot la step kat bawah ni yerr. simple jerr :)



sebelum terlupa, mostly apa yang ifah nak ajar ni untuk mengguna template blogskin. almaklumlah ifah ni mengguna blogkin tegar, hikhik~ kalau yang blog biasa ifah tak sure jadi atau tak, tapi kalau korang nak cuba dulu pon boleh jugak. no hal dear ! :)

1. Pergi kat template korang
2. Copy kod kat bawah nih.

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">


<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>

</marquee>

3. Pastekan pada mana-2 bahagian sidebar yang korang suka.
4. Done ! :)  **opss, jap ! sebelum tu, baca dulu penerangan kat bawah ni yerr :)


Penerangan:
Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar di klik.
url gambar: url gambar yang hendak dipamerkan.

width/height : boleh diubah mengikut kesesuaian


SELAMAT MENCUBA ! ^^

Tutorial : Recent Post (animasi)


Bismillahirrahmanirrahim...
hai, in sha Allah ni merupakan first tutorial yang ifah nak share dengan korang semua. ifah nak tunjukkan kat korang macam mana nak buat recent post yang bergerak-gerak macam kat sidebar ifah tu. hope dapat memberi manfaat tok korang yang berminat yerr, lets check it out ! (っ◔◡◔)っ
1. Design-> Add a gadget-> HTML/Javascript

2. Copy kod ni eh..

<center><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:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,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://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "URL BLOG";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>

URL BLOG tu korang tukar pada url blog masing-masing okei..dan kalau kreatif, boleh edit-edit kod tu sendiri biar nampak lebih cantik :)
selamat mencuba ! ;D


credit : Aulaika