Floating Button

Cuba tengok kat belah kiri blog ni. Ada macam-macam button kan. Antaranya, fb, myspace, gmail n many more. Haa, itulah floating button.

1. Dashboard > Design > Add Gadget > HTML/JavaScript
2. Copy kod bawah ni

<style type='text/css'>a.linkopacity img {filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;-khtml-opacity: 0.5;}

a.linkopacity:hover img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0; }</style>

<div style='display:scroll; position:fixed; top:500px; left:-12px;'>

<a class='linkopacity' href='http://www.facebook.com/profile.php?id=100000640510332' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://i668.photobucket.com/albums/vv43/iomallard/facebook-button.gif" /></a><br />

<a class='linkopacity' href='http://www.myyearbook.com/aishah_youtube' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='myyearbook'><img border="0" src="http://i936.photobucket.com/albums/ad209/shadowstorm09/Gaia%20Stuff/commyyearbookm_icon.png" /></a><br />

 </div>

* Yang warna biru tu link website ok.
* Yang warna merah pulak url gambar yang bersesuaian.
* Yang warna ungu pulak tittla. Contohnya website yang kita letakkan Facebook, so tittle dia facebook la.
* Kalu nak tambah lagi just copy yang bawah ni, cuma ubah yang warna biru, purple dan merah tu ja.

 <a class='linkopacity' href='http://www.myyearbook.com/aishah_youtube' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='myyearbook'><img border="0" src="http://i936.photobucket.com/albums/ad209/shadowstorm09/Gaia%20Stuff/commyyearbookm_icon.png" /></a><br />

3. Save Siap.

Kalau tak jadi bagi tau. Takut ada kesilapan dalam tutorial ni.

Ayat Bergerak ( Marquee )

What is that ? Akrg try tegok kat bahgian atas blog header ada ayat bergerak kan. Itulah marquee.

1. Dashboard > Design > Add Gadget > HTML ? JavaScript
2. Copy, kod bawah ni

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.11NXC/bT*xJmx*PTEyOTE4OTA3ODU3NjEmcHQ9MTI5MTg5MDgwNDcwOCZwPTc2MTcxJmQ9TWFycXVlZSUyMEdlbmVyYXRvciZnPTE=.gif" /><marquee style="background-color:FFDDFF; border: 1px solid DDBBDD; color:000000; font-family:verdana; font-size:9pt; width:700px; height:50px; " direction="left" behavior="scroll" scrollamount="5" >TEXT KORUNK</marquee>

3. Yang highlight kuning tu x perlu ubah pon x pa, Tapi kalau nak ubah saiz ubah la. Ikut kesesuaian blog. Yang highlight purple plak arah ayat tu bergerak, kalau nak tukar ke kanan tulis RIGHT . Yang text kaler merah tu ayat yang kita nak gerakkan.

4. Save Siap.

Letak Icon Sebelah Comment

Icon yang dimaksudkan ialah icon yang ada kat sebelah Comment bawah entry. Kan ada macam kotak mailbox kaler merah. Haa. Itulah icon yang dimaksudkan. Car-caranya :

1.  Dashboard > Design > Edit HTML > Tick Expand Widget Template

2. Kemudian cari kod bawah ni ( tekan ctrl + F )

<span class='post-comment-link'>

3. Then, Copy kod bawah ni plak dan pastekan di sebelah code yang kita cari tadi.

<img src="LinkGambar"/>

4. Maknanya dia akan jadi macam ini ...

 <span class='post-comment-link'><img src="LinkGambar"/>

5. Preview dulu, baru save.

* Yang warna biru tu, letakkan url gambar ... cara nak dapatkan url gambar boleh rujuk kat sini
* Icon tu boleh ambil dari sini 

Letak Like Button Selepas Entry

Button LIKE ni untuk pengguna facebook sahaja. Jadi , sekiranya sesiapa baca entri kita dan dia tertarik so, dia akan tanda LIKE. Itulah fungsi button like. Dalam blog ni pon ada, cuba jenguk.

1. Dashboard > Design > Edit HTML > Tick Expand Widget Template.
2. Cari kod bawah ni, tekan ctrl + F

<data:post.body/>

3. Then, copy kod bawah ni dan letakkan di bawah kod yang kita cari tadi.

 <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

4. Kalau boleh, yang kod langkah ketiga tu , sebelum paste tekan enter dulu supaya dia selang sebaris baru paste kan. kalau kurang jelas klik dekat tutorial untuk blog kat bawah tu,
5. Sebelum, kita save..preview dulu.Takut tak jadi. nanti tak boleh buka blog terus.

Credit to : tutorial untuk blog

Cara Nak Dapatkan URL Gambar

Url gambar selalunya digunakan dalam ruang HTML. Itu tak penting.

1. Kalau nak dapatkan url gambar di Google Image ( google chrome )

• mula-mula tekan right click . Dia ada keluar macam-macam kan.
•  Jadi sekarang just pilih yang Copy image URL. 

2. Url gambar dari Google Image ( Internet Explore )

• Tekan right click. Dia keluar macam-macam kan.
• Sekarang tekan yang bawah sekali. PROPERTIES.
• Lepas tu tengok dekat bahagian Adress (url)

3. Glitter Graphics. Sebenarnya, glitter graphic tidak semua code yang dia bagi digunakan sebagai url gambar.

• Mula-mula dia aka keluar banyak-banyak tu kan contohnya

 <a href="http://www.glitter-graphics.com"><img src="http://dl10.glitter-graphics.net/pub/692/692160k68dp18m79.gif" width=128 height=128 border=0></a>

•  Yang kita nak pilih cuma :-

http://dl10.glitter-graphics.net/pub/692/692160k68dp18m79.gif

4. Dari Photobucket....

• Tekan gambar tu.
• Then, kat tepi tu ada Direct Link, HTML code and many more kan.
• Kita just copy yang Direct Link.

Itu sahaja. Terima Kasih.

Cursor Apabila Gerakkan Mouse

Cursor ni apabila kita gerakkan mouse dia ada macam benda titik keluar kan. Kalau blog ni punya warna oren.

1. Dashboard > Design > Add a Gadget > Edit HTML/JavaScript
2. Copy kod ni

<script type='text/javascript'>


</script>


<script type='text/javascript'>
// <![CDATA[
var colour="#000000";
var sparkles=100;


var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";


star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}


}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {




tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

3. Save . Siap

* yang warna merah tu boleh tukar dengan kod warna yang disukai.
Kod warna boleh tengok di sini 

Link Rainbow

Kalau nak tengok contoh buka blog ni . Link dalam blog dia kalau disentuh berwarna-warni, right. Ok sekarang kita buat samo-samo..yoww..

1. Dashboard > Design > Add Gadget > HTML/JavaScript
2. Copy kod ni

<script src="http://fwzynn.googlepages.com/rainbow.user.js" type="text/javascript">/*********************************************** * Script edited by Ynn at http://fwzynn.blogspot.com/* Please keep this notice intact***********************************************/ </script>

3. Save. Siap dooh.

Buat WishList

Wishlist tu apa pulak. Kalau nak tengok contoh, tengok atas ni. Dia akan jadi macam ini la. Cuma ikut kita la nak tulis apa kat situ
.....  ok, cara-caranya :-

1. Dashboard > Design > Edit HTML/JavaScript
2. Copy kod bawah ni

<form name=myform><input type="checkbox" name="mybox" value="satu" checked />satu <br /><input type="checkbox" name="mybox" value="dua" checked />dua <br /><input type="checkbox" name="mybox" value="tiga" checked />tiga <br /><input type="checkbox" name="mybox" value="empat" disabled />empat <br /></form>

3. Save. Siap

* yang warna merah tu ialah wish yang kita nak tulias dalam wishlist kita.
* yang warna biru tu pulak semakan iaitu benda yang kita nak letak tu tanda tick ke tidak. Kalu checked maknanya tick. Faham. Kalau confuce tanya lah. Kot-kot lah boleh jawab.

Letak Divider Bawah Post

Divider ni selalunya diletakkan sesudah post. Contoh divider adalah seperti yang di atas. Cara-caranya :

1. Dashboard > Design > Edit HTML/JavaScript > Tick Expand Widget Template
2. Cari kod ni

<div class='post-footer-line post-footer-line-3'/>

3. Copy kod bawah ni pulak

  <center><img height='21' src='url divider'/></center>

4. Pastekan pada bawah kod yang cari tadi.
5. Preview dulu baru save...

* untuk dapatkan url dividers klik yang ini

Link Hover

Link hover ni apa ???? Ok, skrg cuba sentuh header blog ni. Ada macam bunga yang jatuh kan. Ha, tu la link hover. Macamana pulak nak buat. Senang je, caranya macam ini :-

1. Dashboard > Design > Edit HTML
2. Cari kod ( tekan ctrl + F ) ni

a:hover {

3. Lepas tu copy kod ni

color:#000000; background:url(CODE URL GAMBAR);background-repeat:repeat;text-decoration:none}

4. Pastekan dekat bawah  kod yang cari tadi.
5. Sebelum save, preview dulu..Takut tak jadi.. Teruk jadinya.

* Bawah ni ada contoh sikit gambar ( pedulikan warna biru tu...ia hanya border di blog ini semata-mata )






http://dl5.glitter-graphics.net/pub/590/590955h5y9k7q5s5.gif






http://dl3.glitter-graphics.net/pub/590/590963r32zjezmm1.gif




http://dl5.glitter-graphics.net/pub/705/705625dlliu27cnv.gif




 http://dl6.glitter-graphics.net/pub/590/590966tdltan40f8.gif

Utk DAPATKAN gambar banyak lagi klik sini 

Sambut Birthday Cikgu Azizah

Baru-baru ni, ke;as 2A10 meraikan Hari Lahir Cikgu Azizah, guru Bahasa Melayu merangkap guru kelas 2A10. Kami sekelas menyambutnya dengan penuh kejutan. Menyorok di kelas sebelah sebelum masuk ke dalam kelas sambil bernyanyi lagu SELAMAT HARI JADI untuk cikgu. 

Bergambar dengan ketua kelas...Ameera

Cikgu Azizah belek kad

Cikgu suap Ameera, puding yang Afifah bawa

Hadiah dan kad untuk Cikgu

Chin Wing Hou dan Fu Ju Jie

sampul kad 

Kegembiraan cikgu terima hadiah daripada KAMI

Budak pandai

Orang Kurang Upaya

Hari ini, tergerak hati nak berkongsi tentang insan istimewa yang bergelar OKU. Info ini dijumpai semasa melayari Interent untuk mencari bahan pembentangan Sivik. Kebetulan, sesi pembentangan sudah pun berlalu jadi, lebih baik info ini dikongsi bersama
 ^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^_^

Siapakah OKU?

Golongan Orang Kurang Upaya ( OKU ). Secara umumnya dapat dikategorikan kepada dua kumpulan utama iaitu kurang upaya secara kekal dan kurang upaya secara sementara.

Antara mereka yang dikategorikan sebagai kurang upaya kekal ialah golongan cacat anggota, cacat pendengaran, cacat penglihatan dan warga tua.

Manakala individu yang cedera, sakit dan mengandung dikategorikan sebagai kurang upaya secara sementara.

Persekitaran tempat tempat awam seperti hospital, sekolah, pejabat-pejabat kerajaan, pusat membeli belah dan taman riadah harus sesuai bagi memudahan warga OKU bergerak secara bebas tanpa bantuan.

Dengan demikian golongan OKU boleh berdikari dan menikmati kemudahan awam seperti golongan yang normal.

Persekitaran yang mesra kepada warga OKU adalah persekitaran yang mesra untuk semua.

Sayangi dan hargailah OKU sama seperti insan insan normal yang lain.

Tengahkan Header

1. Dashboard > Design > Edit HTML
2. Cari kod ni

/* Content

3. After that, copy kod ni

.Header img {  margin-$startSide: auto;  margin-$endSide: auto;}

4. Paste dekat atas kod yang cari tadi.
5. Sebelum save, preview. Dah jadi baru save.

SEMOGA BERJAYA

Daftar Shoutbox

Apa tu shoutbox ??? Kalau nak tau tengok atas tu. Begini cara nak buatnya :

1. Klik http://www.shoutmix.com/main/
2. Kemudian, klik Create Shoutbox

3. Isi maklumat yang perlu diisi

 

4. Sekiranya, inginkan shoutbox yang berwarna klik seperti di bawah. Kalau STYLE & COLOURS untuk warna shoutbox . SMILEYS untuk letak icon yang cantik dalam shotbox.

5. Kalau malas, tak payah klik seperti yang di atas. Terus ja tekan GET CODES seperti yang di bawah

6. Akhir sekali, copy code and paste kat Add Gadget > HTML/ JavaScript.
7. Save. Siap

Disable Right Click

Apa benda tu. Kalau nak tahu, cuba buka blog http://iman-ribena.blogspot.com/ . Kita tak boleh tekan right click kan. Macamana nak buat. Begini :

1. Dashboard > Design > Add a Gadget > Edit HTML/JavaScript

2. Copy kod bawah ni

<script language=JavaScript><!--
//edit by unwanted

var message="Masukkan Mesej  Disini";
///////////////////////////////////function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
// --></script>

3.  Paste kan kat situ.
4. Save. Siap