Tutorial : Autohide Shoutbox plus Float

Float Shoutbox 

1. Dashboard --> Layout --> Add a Gadget --> Html JavaScript

2. COPY code di bawah dan masukkan ke dalam HTML/javascript tadi..

<style type="text/css">
.gb_fixed{
position:fixed;top:50px;right:0px;z-index:+10;
}
* html .note {
position:relative;
}
#hidden_gb2 {
display:none;border:3px solid #F70415;background:#FC6A84;
right:10px;padding:10px;padding-top:20px;
}
</style>
<div class="gb_fixed"><table id="hidden_gb2" cellpadding="0" cellspacing="0"><tr><td>

MASUKKAN CODE SHOUTBOX DI SINI

<div><center><a href="javascript:void(0)" onclick="gb_showHideGB()">
<img src="URL BUTANG CLOSE"/></a></center></div></td></tr></table>
</div><script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js">
</script><div style="z-index:+5" class="gb_fixed"><a href="javascript:void(0)" onclick="gb_showHideGB()">
<img src="URL BUTANG SHOUTBOX"/></a>

EDIT :

ABC : Code shoutbox korang, 

ABC : url link butang close

ABC : url butang shoutbox

ABC: warna border , Boleh tukar ke solid > dashed > double

ABC : warna background

code warna SINI  

3. Save !

penting! kalau nak kotak shoutbox korang cun, pastikan width=300 height=380 untuk coding shoutbox korang.

Button Close :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiigKMgD2A-ReEFsuPBQegp_eGD-ONNR6xLHhbf-P1M9M7hDjK9zkL6u8yF7I77tmtLPgftlhxiPFHiSFua9W9f_jTaMdj7v8sNp2P5FaFT_UR_zGRme9b2dBo_F0KcsxBbq7T8K9U1Jw8/s1600/close2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibq76iIqB2Zv3rrlx38EdQwtiOZXIZV6lvXx55PlVgkbcfJ863ENuH1Rp2oKQj5G9Taoj-Jwq_zTyYYrUipvujP2QTZXXLeolkrYoAw7yV9TOB1jQSS3kSJyBOHVWEkCZ8pamr04noeCU/s1600/close3.png

Button Close :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2iSso9u_KqZZCOsq-A6GV3QbanHXs8QCSDLjrqbPByUYtUiANtn8Je8enqrfOlFH3XW2cqkrHHZalnFWXwODkhoOjmCenLP7Q63I5tQTcbKf-c7qiQ9zjzHsRg86qOHvr_jyIZIh_neo/s1600/shoutbox1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7PHNNH5dbs9ufdy8hST4hZitSszdoyBrTObSy0BAz0ofiBjxegFm6OY5Dbu8EfN9fMaeHhumI7VuH3wIPGPe2NjHMQTCXzfe66C8jkM7Vfav6OAjVTfCGTaT_l2T0lWaUCNc7Y3JTi7U/s1600/shoutbox2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg15f6SFLP9g2SE6Pr2rnj9eZohrMy4lCb4lRSqFtTS35Tmc6Ey_NdmGdlh1wp7rcIcwpN9og0k7Ysxrf6tZ-WuHI7_n7WWm4mzWoWnQTSn3HW0DeP6owlI1KKvrlBtsf0HEuSDypRwWeM/s1600/shoutbox3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEt4ZRmLUiSXVK1ICqtKnuYD_pwt-QTk6Yp6eO67JUp_Vd4D7xUTVbO-PSph0830Z52rNjDCCcozX2J1TuXxjN54HnIUA6xdM_4ueVk3H7KajeeCMfDU1BgkdWeLOaG82tytBfex_IEug/s1600/shoutbox4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipAzu3CBO5yqOemL_4yiz9WDY2wy2Jm8DhsEGYo_vqfPREzgUHpywuYCgY7Id4k5puGL8PRDOCJ5UoNy4W1lEvu98hMM6nul6eeQOJv_GZMNcbScuBMZCp4iUpiDxxby830SBffoe3MKg/s1600/shoutbox5.png