Assalamualaikum.Amboi,tajuk memang tak boleh blah.Sebab saya tak reti nak explain macam mana keadaan shoutbox saya itu.Okay,mula-mula korang tekan button shoutbox di sini,kemudian tiba-tiba shoutbox muncul dari atas kemudian bila close,dia akan turun ke bawah.Sliding atas bawah la kan ? =.=" Aku memang tak boleh jadi cikgu,nanti anak murid belajar ajaran sesat.Contoh macam gambar di bawah ini.
Eh,kantoi pulak mesej-mesej itu.Heheh.Tutorial ini sengaja di publish pada bulan Januari.Kenapa?Ikut hati saya lah.Kekeke =.="Okay,jom belajar.
1. Dashboard - Design - Page Elements - Add a Gadget - HTML/Javascript
2. Copy kod di bawah & paste dalam HTML/Javascript itu.
<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
float:left;
border:2px solid #99CCFF;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
KOD SHOUTBOX KORANG PASTEKAN DI SINI OKAY
<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>
</center></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script>
<a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2wFR0JMjOgcO7LT4HZcKRAGg9rtUnUliNYV1-hrQGASv9TkGHa2Xly4WjrKTPrKTHjyxvhuVBFIRobVKnxYLhxfpRTkCI59ow8lg_uthrvItBmarX1NMD1XbZ5aZXYZ5kzBDxeXYH5fc/s1600/shoutbox2.png" border="0" /></a></center>
3. Kemudian gantikan KOD SHOUTBOX itu dengan kod shoutbox korang.Tak kiralah korang pakai apa,CBOX,FIBOX,SHOUTBOX,BUSUK dan lain-lain.Semua di terima akal.Cewahh.
4. Border dan background (warna purple) itu bolah ubah ikut warna pilihan hati korang.Kod warna boleh rujuk wikipedia.Border solid itu bolah tukar dengan dotted or dashed. height ="125" yang bold itu boleh tukar ikut tinggi button korang okay.
5. Gantikan https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2wFR0JMjOgcO7LT4HZcKRAGg9rtUnUliNYV1-hrQGASv9TkGHa2Xly4WjrKTPrKTHjyxvhuVBFIRobVKnxYLhxfpRTkCI59ow8lg_uthrvItBmarX1NMD1XbZ5aZXYZ5kzBDxeXYH5fc/s1600/shoutbox2.png dengan button korang sendiri okay.Ini saya berbesar hati bagi button untuk korang.Kalau nak copy je url button itu.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIDTsa3Q5w_uW4gjMkvYvG9_4T3sJZB62s90QfFpaG9JCq2SvG5Tq1CL41BONpxP-XAnPZQ3an148ttceenNK20MUF4nOxMb8OrhjMTpwZ5lK8WNX5JoQJccZ88K88Zgrym9S_FXWgK4/s1600/shoutbox10.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8mmX_2FiT5iCZcRN7bqhxCP5zY11DOYh3l2Uwdc4DqSnIDbszt6B3XAlfjtNXjOxtPszhtm6ty-yEquIYOBtrcEDCR-cCtNjR1-k8_4EO5S8w__MF5WYa7QlMzk99xtju2K_SciwK9wU/s1600/shoutbox2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgJ4o63zO2unqyhOfqHUoQBcyx5DSIUsTJp2q4XpDeIMufOxzhWDioI2xB-jQ9ZyoGifRmsO2-iWefpsxrdntZrLPwMYrvGuD62W0jqeC3zl3NeFEAvFofhykAAdbjFyz0iokIkh3LoPs/s1600/shoutbox3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsJJWO0zO5oZkSVXMTRlvrrcDQh33GoNS0COvhH2Mmby5U7ZnfR78tEKMbOedSZkA6ZPfi49_Y099YwMCmbinxK-KF67a9emVGaV91eGC20dk0b4lhmi0812bswNiGYrKcnCdlTTUJuaY/s1600/shoutbox4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMJE0NZhJYgoLmA1_eNVhH8_34MRgTN7jhm9UkxoAAccJ01-_MX2mz7qf5NCTCBA9tJ3Ylwg0ev5Kz8DwM62SJRnvzMHrimyc2XTKZHC10nzRz6Ncu2DlfVoSvqJoKgwjGKwuPxqIFl8/s1600/shoutbox7.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ5pGA58oSVfC9dTlZrmGRNZWZlqQkP7UsHX0Ff9NfXMQgP6uHcanwy25735RXOT75fjers07_vp3dQNSx5jZgaMQ5PzZYaal_i_PM1cUvqBPyyvvruXIfQT2vUEAoeQSCGT05heg_KXE/s1600/shoutbox6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZaY7GWX6FXlXO4mebY9H2x__eHxxkhIlffBrVLhhyphenhyphen-GShqTe5x86N_FTdfj2isMKvGdtx4gog0WFfM9KjPga0lpGPIXvx1llXHtgzKF0-YAPr0fu4SAEnRjopE4P2_pVUpt5cpsbStig/s1600/shoutbox9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5TxzAp3v2SwjGNlXJRUfFZb7xhe0lbn7nwvXV1Vu1-k_mjQW5aRAzQxaBGBS48gpMMNCdAommDMrWlreelOrjI4g3yXuHESBcCK-Zl9MFXv7PhKfGsWQIihpLhx6CkqKJRJRm-VDOzw/s1600/shoutbox8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXeJpKY7iaKPpQeHGmwmf-kFQ21iFaiNRr5NuPtB8Gbd-y6HcAuIJW2bcsJbS7Q30fHG2aN4G3yIxraiKhRLesWPK25e8CW_2XbbE2bZpoyShn0JC8iNxkAH0HSBzQcMe6MFo2BC9G1TM/s1600/shoutbox5.png
6. Save.
Kalau korang teringin button ini untuk kegunaan korang,save je gambar macam biasa okay.Sekian berita saya pada hari ini.Kalau tak reti tanya la tau. ^___^
22 Flowers:
wah! comel nya button awk ni. nak 1 boleh? :)
@Soul Lee Hin
boleh boleh..pkai je :)
argghhh ini sangat kawaii! naz dah buat tutorial skrg ni. yeayyy! hehe ninie dah pencen T__T
@Ninie
aii,dah lama gile kan tak buat tuto..kihkih..tu pon sebab ada org tnye..kalo x xbuat nye la..tu pon kt buat sekali byk tutor ,xbuat satu satu..rugi masa je.. ^__^
thanks ..sy amek satu ye ..kiki
Kak Nazirah...jady...thanks...^_^
Comel! Menjadi! Thanks
sandra guna freebies atas skali tu eh. thanks :) nnti sandra credit kan :)
Waaa comey la , saya amik satu thanks tau :D
ambil satu ya., ^^
comel laa , sy ambik 1 ya ?
mohon amik 1..:)
sweetnye ! dah curi satu la kak ! menjadi ! cute sgt ! thanks for the tuto ! comei blog akak ni !
thanxx ! comell :D
comey-comey freebies akak!
thanks sharing ! comell.
awak..kite amik satu ye buttn tu..thnks :)
thank youuu! udah jadii.. yeay!!!
comelnyaa.. tak taw nak pilih yang mana satu. hehe.
sudi singgah la blog saya :)
thepicnicbar.blogspot.com
sally follow tutorial ni...sally ambik sekali ikon satu ek :)
Hi, thanks for the tutorial. Saya ambil satu ye. Jemput datang ke blog penulisan saya
saya guna
Post a Comment