Floating Shoutbox Version Slider (Shoutbox Terapung Versi Slider)

Mungkin anda pernah nampak chatbox yang terapung di blog rakan anda dan tertanya macam mana mereka buat. Pos kali ini akan memberi panduan kepada anda bagaimana nak letakkan chatbox yang terapung ini.

Apa yang anda perlu buat adalah login akaun Blogger anda dan pergi kepada Design > Page Elements dan tambahkan HTML/JavaScript widget box baru. Kemudian copy dan paste kan kod di bawah.

CODE START

<!-- Begin Show Hide Floating --><br /> <style type="text/css"> #chatbox{ position:fixed; top:50px; z-index:+1000; } * html #chatbox{position:relative;} .chatboxtab{ height:141px; width:40px; float:left; cursor:pointer; background:url('http://lh4.ggpht.com/_Of6qbyNcVQw/TN_aqVvHRlI/AAAAAAAAATQ/19ngQ-HUuJw/cb_bg.png') no-repeat; } .chatboxcontent{ float:left; border:2px solid #C3D7E5; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidechatbox(){ var chatbox = document.getElementById("chatbox"); var w = chatbox.offsetWidth; chatbox.opened ? movechatbox(0, 40-w) : movechatbox(40-w, 0); chatbox.opened = !chatbox.opened; } function movechatbox(x0, xf){ var chatbox = document.getElementById("chatbox"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; chatbox.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movechatbox("+x+", "+xf+")", 10);} } </script> <div id="chatbox"><div class="chatboxtab" onclick="showHidechatbox()"></div><div class="chatboxcontent"><!-- YOUR CHATBOX CODE --><br /> <div style="text-align:right"><a href="javascript:showHidechatbox()"> [close] </a> </div></div></div><script type="text/javascript"> var chatbox = document.getElementById("chatbox"); chatbox.style.right = (40-chatbox.offsetWidth).toString() + "px"; </script><br /> <!-- End Show Hide Floating -->

CODE END

Arahan:

1. Tukarkan kod ini kepada code chatbox anda <!-- YOUR CHATBOX CODE -->
2. Selepas siap langkah diatas, dapatkan kod dari pembekal chatbox anda (Cbox,..dll), kemudian paste kan kepada kod yang bewarna putih di atas.
3. Jika anda hendak design sendiri butang klik chatbox anda, hanya tukar dengan link yang bewarna hijau. Pastikan butang klik anda bersaiz 40x141.

http://i1023.photobucket.com/albums/af355/abuinayat/Tab.png

http://i260.photobucket.com/albums/ii27/blay83/floatnav.jpg

http://i634.photobucket.com/albums/uu69/lonely_evil/blog%20design/about%20me/Chatbox.png

http://i801.photobucket.com/albums/yy298/GeePhotoArt/HTML%20gitu%20loh/red-tabs.png

http://i1199.photobucket.com/albums/aa480/ain_sipelangi/shoubox.png

http://i891.photobucket.com/albums/ac116/hamiasraff/shoutbox-3.png

http://i1188.photobucket.com/albums/z401/fardanrizwan/d.png

http://i1002.photobucket.com/albums/af144/azmi88/small-shoutbox-icon.png

http://i902.photobucket.com/albums/ac221/akubadboys/shoutmixbanner.png




Sekarang cuba chatbox terapung anda. Pastikan ia berfungsi dengan baik. Ok coding ni boleh digunakan pada cbox or shoutbox.