Tutorial : Hide Shoutbox

    ...Kelmarin hari n0sa dapat request daripada s0rang rakan blogger niey...  

 

pengakuan berani mati daripada n0sa : n0sa sebenarnya tak berapa pandai bab2 nak buat tutorial niey...plus, niey first n0sa buat tutorial tau...harap tutorial niey dapat memenuhi request wanatie...bagi blogger lain yang mempunyai keinginan yang sama..boleh laa ikut tutorial niey...hehehe...kat bawah niey n0sa bagi tau step nya k...caranya senang jew...

    Bagi yang tak tau macam mana shoutbox yang tersembunyi tu...niey laa shoutbox tuu...yang n0sa bulatkan dan anak panah kan tu...    

    then, bila klik kat image shoutbox tu akan keluar macam niey...yang n0sa petak kan dan anak panah kan tu...   Step 1 : Dashboard > Layout > Add  a Gadget > HTML/JavaScript...   Step 2 : Copy code dalam kotak kat bawah niey dulu k...

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:350px;

width:140px;

float:left;

cursor:pointer;

background:url('URL IMAGE YANG KORANG SUKA') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #00000;

background:#F5F5F5;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 150-w) : moveGB(170-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 KOD SHOUTBOX/SHOUTMIX KORANG KAT 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 = (140-gb.offsetWidth).toString() + "px";

</script>

* nak copy code kat atas tu buat macam niey tekan Ctrl + C serentak...   Step 3 : Then, paste code yang korang copy tadi tu kat HTML/JavaScript k...   Step 4 :  Yang warna purple (height / width) tu, korang ubah laa size mengikut kesesuaian blog korang...  

Sep 5 :

Bagi yang warna pink pulak tu. korang tukar laa dengan mana2 url yang ada image shoutbox yang korang nak k...?

Step 6 :

Warna merah tu korang masuk kan laa code shoutbox/shoutmix korang tu...

Step 7 :

Daa siap...korang save...preview tengok menjadi tak...k..

  baru n0sa tau penat jugak erk nak buat satu2 tutorial niey... * bagi tau, kalau menjadi k...