How To Install Floating Shout Box

Ok, hari ni saya akan ajar korang macamana nak buat floating shout box  kat tepi blog korang. Float? Macamana tu?
Nak tau? Rujuk gambar rajah di bawah.

So, best tak ada shout box gini? Nak tau tak macamana nak buat?
Kalau nak, ikut langkah-langkah kat bawah ni yea..:-)


1. Korang mesti ada account shoutbox/shoutmix/etc. Register kat SINI
2. Pergi ke Dashboard => Design => Page Elements => Add a Gadget =>        HTML/JavaScript


<br /> <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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRalLPfoFD6-zPDriBGsWXIURXqoTUIXcM4m1GMN6iTEGfEUQbgzIHuiBhs8-05c5d456AfZV9EHbgVaQiq-CHDuWbPVfmwqo1CJm2IdGkDvzwxGO5ebCvpU7t0wKaWuZzEjRSMIBp9De/s320/tabs.png') no-repeat; } .gbcontent{ float:left; border:2px solid #666666; background:#F5F5F5; padding:10px; } </style><br /> <br /> <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><br /> <div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><br /> <br />//Letak Coding Shoutmix kat sini<br /> <div style="text-align: right;"><a href="javascript:showHideGB()"><br /> [close]<br /> </a></div><script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script><br />


3. Pastekan code di atas ke dalam form HTML/JavaScript tersebut.
4. Cari ini : 

5. Then, pergi semula ke account shoutbox korang.
6. Salin code yang diberi.
7. Gantikan perkataan //Letak Coding Shoutmix kat sini dengan code shoutbox korang. (rujuk gambarajah di atas)
8. Setelah selesai, klik save.


*credit to blogcaripasal for the coding..:-)