Tutorial : Cara Buat Auto Hide Shoutbox & Chatbox Pada Sebelah Kanan Blog

Atas permintaan Lanun akan sharekan cara untuk buat chatbox / shoutbox yang di pasang pada sebelah tepi blog korang. Chatbox ni jugak auto hide, hanya show bila kita klik menu dia. Cara untuk buat chatbox macam kat blog ni blog ping post terbaru ping up trafik!.

Series, memang tak susah dan sangat mudah dengan tutorial dari lanunsepet. Chatbox stail macam ni nampak lebih kemas dan stailo. Ramai rasanya dah buat style macam ni.

Terbaru anda jugak boleh gunakan kode skrip auto hide ini untuk widget yang semakin hangat sekarang iaitu Wawwi blogwalking network, yang boleh jana wang, dan jana trafik dengan mudah. Ia hasil dari designer tempatan dan Lanun tgk makin ramai yang pakai, jadi korang just gantikan tulisan purple tu dengan kod /skrip  Wawwi widget blogwalking.

So kalau sesiapa berminat nak tukar yang lama jadi chatbox autohide boleh disorok sorok ni boleh rujuk tutorial kat bawah ni.

1. Log in ke dashboard blog korang
2. Layout > Page Element > Add a gadget > HTML / Javascript
3. Copy n Paste semua code dibawah nun dalam content kotak HTML / javascript
4. Tak perlu letak title
5. Perasan tak tulisan berwarna purple tu?
6. Gantikan ayat berwarna purple dengan seluruh kod/skrip shoutbox / chatbox korang.
7. Tekan save

Jadi sekarang korang boleh buang chatbox yang lama. Sekarang chatbox auto hide tu akan menempek kat sebelah kanan tepi blog korang. Pastikan hati hati masa copy n paste jangan tertinggal sedikit pun untuk elak error. Gunakan CTRL F (cari perkataan), CTRL C (copy) dan CTRL V (paste) untuk mudahkan korang buat tutorial ni.

<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/AVvXsEi07kf75mDyi_csjgZQkkX5dizCGTFDpLZChZy4T8IAXbBtIQUAX-jYBtPp5w8yoevd8v2JanlIiINJ9MkuxTvPwW2pQ_k3ttjelVx4LyoBSQv2Lu5Q8vw7cgei4wHrTW6IbK-hqo6R9wIo/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<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>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

GANTIKAN LINE NI DGN KOD/SKRIP WAWWI/CHATBOX KORANG

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


credit to : http://bintangzither.blogspot.com/ tempat rujukan lanun. TQ