Memasang Shoutbox Buka Tutup

Setelah dua hari tidak mengonlinekan diri, hari ini penulis kembali dengan tutorial baru. Untuk makluman, tutorial ini dibuat atas permintaan pelawat ini di shoutbox. Soalannya juga berkait rapat dengan shoutbox iaitu cara memasang shoutbox buka tutup di sidebar. Berapa banyak perkataan shoutbox daa...

Cara memasangnya tidaklah sukar sebenarnya, malah tidak mengambil masa sehingga lima minit pun untuk menyiapkannya.

1. Login ke Blogspot.

2. Pilih Layout - Page Elements.

3. Pilih Add a Gadjet - HTML / Javascript.

4. Kemudian, salin kod di bawah ini ke dalamnya.

<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/AVvXsEiOwbNe8b3wDk3IvXFRu5YI_dKS9986LmJX22soe26_KTCuVS9NjC_hPTT1zHutMPiL056QiHTABgvHo_yNdZpX_bwfAWhStCXpl0cfkeG-P0hecOgELzg7nXG4t2DfwAezqRUjxw/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">

Tampal Kod Shoutbox Di Sini

<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>
Tulisan berwarna ungu menandakan kedudukan shoutbox anda di sidebar. Semakin besar nombor yang anda gunakan, semakin ke bawahlah kedudukannya nanti.

Nota : Jangan tulis apa-apa pada bahagian Title di gadget HTML / Javascript anda. Biarkan kosong.

5. Save.

Selamat mencuba. Semoga berjaya.

Via : Anarm