Tutor: Hide Shoutbox

Hehe.. segan pulak nak post entry ni. Ni first time la buat tutor, bukan nak tunjuk saya hebat. Tak tak! (=.=")
Haduii dah cuak dah ni.. hehe.. Ada seorang rakan blogger bertanyakan soalan ni kat formspring. So nak buat gempak, saya buatlah entry ni.. hehe.




Shoutbox yang boleh hide itu dinamakan Floating Box ya kawan-kawan.. Ceh3..
tengok tu, comelnyee strawberry tercongok kat situ.. auwww


Okay, jom kita start. Mula-mula pergi ke Layout > Page Elements
Kemudian Add a Gadget dan pilih HTML/ Java Script.
Copy-paste kan code di bawah ini, tekan CTRL C untuk copy dan CTRL V untuk paste.



<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
[LETAKKAN KOD SHOUTBOX AWAK DI SINI]
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>




Okay, sekarang ni copy kod shoutbox awak yang asal dan gantikan perkataan yang bold merah di atas. Cepat! Copy code awak, dan pastikan simbol ini [] dipadam sekali, okay?

Kelik save. Ingat, jangan padam dulu kod shoutbox. Preview dulu kod baru yang awak letak ni dan pastikan tak ada error.

Kalau dah berjaya, remove kan gadget kod shoutbox awak yang lama. Dah.

Oh! Make sure awak tak letak title ya kat kod shoutbox yang baru tu. Sebab dia kan akan melekat kat dinding. He he..


Done. Kalau tak menjadi, please drop comment. Selamat mencuba, dan selamat tengahari~
(^__^)



17 wishes received:

  cikgadis konfiuss

June 3, 2010 at 4:04 PM

wahhh seius tQ
dapat ilmu baru drpd blog twin!
hehehe

=)

  Encik Tikus

June 3, 2010 at 6:30 PM

thanx for sharing babe :D

  Irwan Amit

June 3, 2010 at 6:34 PM

kongsi2 ilmu tu kan amalan yang mulia lagi berpahala.. thanks for share :)

  peaNut

June 3, 2010 at 6:47 PM

wahh..best2!!tp keler hijau tu xleh tuka la..blog saya tema purple..huhu..anyway,,salam kenal...i'll follow u..
visit my blog nnti k...
http://missbean88.blogspot.com

  Siti Ruhayu Ab Rahman

June 3, 2010 at 7:07 PM

good info

i like...

  cokelat panas

June 3, 2010 at 7:34 PM

hehe..kenape sy bace mcm susah jek..hahaa

  rara :D

June 3, 2010 at 8:23 PM

thanks for your usefull tutor . :)

  imelda

June 3, 2010 at 10:41 PM

ty for the visit

  Syafrizal

June 4, 2010 at 3:48 PM

saya dah malas nak guna Shoutbox sebab ramai spam.. jadi saya ganti dengan Google punya

  oh farah

June 5, 2010 at 10:51 AM

warghhhh!!! da jadi!! thanx a lot! nanti boleh belanja singgam :D

  zither

June 5, 2010 at 4:48 PM

farah.. saya dh tak makan singgam.. saya nk lollichoc! belanja saya sekarang!! hehehe

  ini cerita merapu

June 8, 2010 at 8:49 AM

thank u so much . tutor ni very useful (: .

  LaNuNsepet

June 8, 2010 at 7:21 PM

salam...

zither..lanun try nak wat tutorial gni..tp problem bile..

lanun nak kopipaste code yg pnjg tu kat post lanun.. bila kopi n paste..
terus jadi shoutbox kat situ..

aduh..
camne ek..
leh gtau nak kepit ngan ape kod2 tu?

  LaNuNsepet

June 9, 2010 at 12:03 PM

lanun wat rujukan untuk wat tutorial yg sama..

lanun buh credit kat zither k..
TQ :-)

  ezaty idris

June 18, 2010 at 2:20 PM

thanks for the tutorial!
btw mcm mane nk tmbah smiley kt shoutbox kita?

  Una Ulala

June 18, 2010 at 11:50 PM

this is really helpful too!
cane nak template cmni ekk??
lawaa laa ;)

  ziziezizot :)

August 1, 2010 at 2:03 AM

big thanks! :) bestnya bestnya. :D

Related Posts with Thumbnails