Tuto ini special buat anak-anak semua . haha. bukan juz nak hide kan cbox tapi boleh buat ia slide dari atas ke bawah . faham tak ? maksudnya bila korang tekan cbox korang, ia muncul dari atas and bila close, ia turun ke bawah.
Nak buat ? cewwah ! classic laa blog korang kan ? apa pun, follow me dulu yerk?!
STEP 1
Sign In > Dashboard > Layout > Add Gadget > HTML/Javascript
STEP 2
Copy and paste kod kat bawah :
<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">
Paste kod shoutbox korang.. kalau tak ada lagi , sign up kat sini yer
<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="BUTTON KORANG NAK" border="0" /></a></center>
NOTANOTA !
Border and background (warna purple) itu bolah ubah ikut warna pilihan hati korang. Kod warna boleh terjah kat sini !. Border solid itu bolah tukar dengan dotted atau dashed. Height ="125" yang bold itu boleh tukar ikut tinggi button korang okayh.
Tukar "BUTTON KORANG NAK" dengan url button yang kat bawah nie.. pilih laa ikut citarasa korang. Farah just copy button http://suzuran89.blogspot.com punya. tenx a lot to her !
Warna merah dalam kod tu ganti dengan kod shoutbox korang !
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawTrymIFtbAi0P8-xjxLQA8hejMTi2wkM3nR-YcxlnCvzUHR3y1JSfGQUk7sMyyzz4Qw2kH_XPr4d36sRy7_BE8H2s9yFV6nq5WeYCLyJZpCnU0hEbdayAEZVahsnBZ_gmdfR6M4Cr7Q/s1600/shoutbox1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEs0_bnCG8AORS1q8_CFk7dI7XMdFttUampMiy21blYm45rdM8QtuJo3lwa_9lVKY6hqMREAV3Anwe0HfPuiAcR8CYIDbGgBxcatra3LpoJ6-UDcnQHMB4TQckcqI6ijJpcSLAirvrEw/s1600/shoutbox10.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrDyIDxtKsGjYPkSb_K6zgHlUK7SJH7iyMHcfpgeBzQqe2IaW-VkP7jvOZTeymhnumKz9oFbRRioxEwPwpNAniS5STtSuh59970EeOFWcA4llsXbr6Kxn83slYig_8mYHKztkdEqsZa7o/s1600/shoutbox2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGKxRRYPv5_iRA0jmrGuE_Rm9DSIXlphaQgIHhjG22S4HL5e7lUayZ05uLgwtQXvhxGq-IxxmAg-rQi40y7PNSuwUMYHObiFO64ZMRmgMZrVKdGLPbYVXu_YfM6G605JABQgnHboViie0/s1600/shoutbox3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzrxhf9bgJ8Y7bOnmQxu32rYW4OmxFy1gF3l3hVuJLyuZFJAuJPpLMNox6AquoGG7OU_lDUbcqSG5JWKU3VTEjS1FazvaZ2QP_ZsxB8D4vfE7aP_4nbDLbSdzdafQeqoJW84hc6T-VpXc/s1600/shoutbox4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLamPdtfw_3U3RY9Zo9ubjw8tSGKYm8XhlVZFDa7GLWGWfFR8pylWo_pkYhIJdOuB1YPGjz8fdT3NvnVBVL7yVJw96k4jkftm9wa5xTug2fPDp0CiNszMzw9XZHpr3n1A3D-A-v2L1ZM/s1600/shoutbox7.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY_gM2KQe9WuYtMkosETEA6czNRI2zUglVcXvhGAjcAAeb0q4gOAyCNd9XvpX3J_IITaHmlLagXioOhS8IvXx1yJ_obxMTBlE9u3LX8m_rL8i6gV47mvwVLRy122wO5HLXeMrD86ACu8w/s1600/shoutbox6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXISydfkU3auLqM5gfFtYvq1unFRxu997tvdvohKGJHHobKC9GdVHwoNKlc_uSpce3NfbEktZfQxaJJYarq6B9hJR1UWIW9wAp2uVbwX8zsY9Lqc__UB_TDyU21CFQtR30dReB4YG05e8/s1600/shoutbox9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi15rZL07uKWlyewNSw5NH5rSCa25I2xo4apOLLRCZWWTepzo1b71Tj6ypCn-jWtfajq9YcFrv_nbbzTZIyexj6USMjqGgiQd3xg9ilCJ5IAlTX3lGTBpv1IMpwx33IjJrhq46bH-lNy1U/s1600/shoutbox8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8W7GWJpi3W5WUOQ9YKjXc6M3NlG00pQnWTNqQ_S74SYp54_4XDW634oHCzR48bYbyfTYf0sHE2VTzpAQCmFip9f-QIs4k8dfd3gqmgREgASiaX5Fx-xoNU21dntV0rT9GbFdrfg26kK0/s1600/shoutbox5.png
STEP 3
Save , Preview and Enjoy !
No comments:
Post a Comment