Untuk tutorial kali ini, saya ingin berkongsi cara untuk sembunyikan shoutbox anda pada sisi blog. Tujuannya adalah untuk menjimatkan ruang pada blog anda dan supaya blog kelihatan lebih kemas dan tersusun. Tutorial ini diambil drpd blog lama sy iaitu MTA Studio. Disebabkan sy telah menukar email maka sy bertukar blog ke Syoknyerblogging. Cara untuk membuatnya senang sahaja


1 Pergi ke Dashboard  > Design  > Page Elements > Add A Gadget > Html/Javascript

2 Salin koding di bawah dan paste pada kotak widget td. Gantikan teks "MASUKKAN CODE SHOUTBOX DISINI" dengan koding Shout box anda.

<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/AVvXsEik39Zwo1cHJ7N2rGbCJSyZlWnJ6ymuYrIMSNghKYUSbyBVeOUu1SWYsvkMqfBBOa3v2F-sh4HSNqwGs0YpCCd6Dim0WBAw2fewRfchNscOk2hDBvlPTsk6MnP_C9QL73SLimlPSld4aUh1/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">

MASUKKAN CODE SHOUTBOX DISINI

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

3 Tukarkan link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik39Zwo1cHJ7N2rGbCJSyZlWnJ6ymuYrIMSNghKYUSbyBVeOUu1SWYsvkMqfBBOa3v2F-sh4HSNqwGs0YpCCd6Dim0WBAw2fewRfchNscOk2hDBvlPTsk6MnP_C9QL73SLimlPSld4aUh1/s320/tabs.png dengan link gambar yang anda inginkan

4 Save dan lihat hasilnya.

Selamat mencuba (^^,)

---

Blog
Gadget

Jika anda sukakan article ini,linkkan kembali...

<a href="http://syoknyerblogging.blogspot.com/2010/12/cara-membuat-shoutbox-hide-and-seek.html">Cara Membuat Shoutbox Hide and Seek Disisi Blog</a>