'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...

6 comments:

  1. sis~~susannyer..adoii..xdpt buat sailormoon mcm sis tuh..hihi..pening2..

    ReplyDelete
  2. dapat!!! perfect giler... sayer ada pendedahan sket2 la pasal html2 ne...tq sis! lama da sayer cari ne.. hehe... saya nak letak kat blog baru sayer..x nak kacau blog yang skarang ne..thanks a lot!!

    ReplyDelete
  3. Cik Purple.. hihihi.. copy coding pon dah leh jdik.. t slow2 bce coding plak yer..hihihi..
    bleeddrummerz.. thumb up!!

    ReplyDelete
  4. nak copy gambar tu boleh tak ?? huuu

    ReplyDelete
  5. Usagi.my favourite heroin.dengan kuasa bulan akan menghukummu..

    thanks for sharing the info.

    ReplyDelete
  6. Boleh lah yg.. copy saje.. heheh.. smpai la ni minat usagi walaupon dia cm blur2 jer..hehehe...

    ReplyDelete