'Hide' dan Show' Shoutbox/Shoutmix

Walaupun tutorial' Hide' dan 'Show' Shoutbox/Shoutmix ni banyak dah ada, tapi saya buat jugak atas permintaan sesuciceriterakasih...dan untuk simpanan saya.. jom layan..hehehe...

Sebelum dan Selepas Klik

1. Korang mesti ada shoutbox/shoutmix or yang seangkatan dengannye..hehehe..

2. Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

3. Copy and paste code dibawah.

<!-- Begin Show Hide Floating -http://ieza-usagi.blogspot.com-->
<style type="text/css">
#lowgenFX{
position:fixed;
top:50px;
z-index:+1000;
}
* html
#lowgenFX{
position:relative;
}
.lowgenFXtab{
height:550px;
width:38px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipiERsVzqPY5rnryhrzxV5gM1W_shvvr7Eu7vDpopIhBDqHRPXc6tP0-8g_wHGu07Edrp1JlrWGYBKqG8shgNDiCwBBP1Gi_M5kTzOsSswEimQ_dA5yFrX4OrhjimuaznzQ4j2aec8Msg/s1600/hide+n+show+shoutbox.png') no-repeat; }
.lowgenFXcontent{
float:left;
border:2px
solid #ffffff;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
background:#C12267; padding:10px;
}
</style>
<script type="text/javascript">
function showHidelowgenFX(){ var lowgenFX = document.getElementById("lowgenFX"); var w = lowgenFX.offsetWidth; lowgenFX.opened ? movelowgenFX(0, 38-w) : movelowgenFX(38-w, 0); lowgenFX.opened = !lowgenFX.opened; } function movelowgenFX(x0, xf){ var lowgenFX = document.getElementById("lowgenFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; lowgenFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movelowgenFX("+x+", "+xf+")", 10);} } </script> <div id="lowgenFX"> <div class="lowgenFXtab" onclick="showHidelowgenFX()"> </div> <div class="lowgenFXcontent">


LETAKKAN CODE SHOUTBOX/SHOUTMIX DISINI

<div style="text-align:right">
<a href="javascript:showHidelowgenFX()"> [hide] </a>
</div>
</div>
</div>
<script type="text/javascript"> var lowgenFX = document.getElementById("lowgenFX"); lowgenFX.style.right = (38-lowgenFX.offsetWidth).toString() + "px";
</script>

4.Gantikan tulisan LETAKKAN CODE SHOUTBOX/SHOUTMIX DISINI dengan code shoutbox/shoutmix korang.

5. Dah siap...jangan lupa save..hehehe..

Dah tue? yang banyak-banyak colour tue?

Tulisan yang berwarna tu korang tukar lah ape-ape yang patut.. hehehe... ok.. saya akan terangkan supaya korang akan dapat bentuk apa yang korang impikan..hahahha...

     = Hijau ini adalah jarak box dari atas, lagi besar angka box semakin ke bawah ye..

     = Yang ini untuk lebar size gambar yang korang pilih.Ada 4 tempat yang korang perlu tukarkan dengan nilai yang sama.

     = Warna ni untuk icon kegemaran korang. Gantikan url ni dengan url icon  kegemaran korang...

     = Yang ni pulak warna untuk line luar border. Korang boleh gantikan dengan warna yang korang suka.

     = Warna purple ni adalah untuk size lengkung border.. if letak kosong, dia akan jd segi empat bese jer..

     = Untuk yang ni pulak adalah warna dalam border... gantikan dengan warna kegemaran korang...

     = Kuning ni plak adalah jarak antara shoutbox. Makin besar angka, so makin besarlah kotak background shoutbox korang yer..

wah!!! dah pandai baca coding ek?? hehehe... apa-apa pun ni hanya sebahagian jer... yang len korang belek-belek sendri eh...ok.. ¡buena suerte!

Yang kat bawah ni icon tuk cik Sabrina.... sowi kalau tak comey..huhuhu...

Just sharing what I've experienced...