Hide SHOUT BOX dekat tepi blog

fareast

Shout box di side bar menyemakkan? Nak loading sidebar mengambil masa yang lama? Mahu mengatasi masalah ini? Mari-mari ila ajarkan. Caranya.mudah sahaja, pastikan anda sudah memiliki Shoutbox, jika tidak anda boleh dapatkan shoutbox disini –> ShoutMix.com . Ikuti langkah-langkah dibawah ini.

1. | Copy dan Paste kan Code ini kedalam blog anda. (Dimana-mana sahaja yang sesuai)

<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('http://img412.imageshack.us/img412/5049/tmerah.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 SHOUT BOX ANDA 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>

2. | Pastikan anda memasukkan code shoutbox anda pada text yang berwarna merah di atas. Seperti:

<div>
<!– Begin ShoutMix – http://www.shoutmix.com –><iframe title=”abx” src=”http://www5.shoutmix.com/?abx” width=”" height=”" frameborder=”0″ scrolling=”auto”><a href=”http://www5.shoutmix.com/?abx“>View shoutbox</a></iframe><br /><a href=”http://www.shoutmix.com” title=”Get your own free shoutbox chat widget at ShoutMix!”>ShoutMix chat widget</a><br /><!– End ShoutMix –>
<div style=”text-align: right;”>

3. | Anda boleh menetapkan ketinggian dimana Shoutbox itu berada di bahagian tepi blog. Ubah nilai pada text berwarna biru eg: 60px / 77px / 100px (mengikut kesesuaian blog).

4 | Terpulang kepada anda untuk menetapkan Shoutbox berada di sebelah kanan (right) atau kiri (left) dengan menukarkan right / left pada text berwarna Ungu, tapi perlu diingatkan kedudukkan asal adalah disebelah kanan, jika anda menukarkan pada kedudukan kiri, gambar (tabs) anda juga perlu ditukar kerana akan kelihatan janggal.


5 | Jika anda ingin menggunakan gambar (tabs) sendiri anda perlu menukarkan Link pada text berwarna Aqua itu kepada Link gambar anda sendiri. Jika anda membuat tabs sendiri dan tabs itu hanya keluar separuh sahaja sila ubah nilai pada tex berwarna Oren. (Mengikut kesesuaian)

Contoh-contoh tabs yang digunakan. (Right Click –> Copy Image location jika anda ingin salah satu gambar dibawah ini) :

-- —- -- –— —- —- –—

Selamat mencubanya
*Sebarang kemusykilan, jangan segan-segan tanya ila dekat Shout Box disebelah .