Wednesday, August 17, 2011

sorok shoutbox..



Hari ni mun nak buat tutorial macam mana nak sorokkan shoutbox korang..macam mun punyer kat tepi ni..ok..mule2..

1.korang kenalah sign in shoutbox korang dulu..kalau takde…korang boleh sign up kat sini untuk shoutmix and tekan sini untuk chat box....
2. copy this :

                 
       <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/AVvXsEh-VGThrCNhxfnE5FCtcyCdrqBqWSTyucsE121dlknBxnDAukp0o8PfQuuafkmOzaa_24XUrUObuklK_QK2X-tGqiOYPcOh_ppE1EmJrwGxJbGTNxXuiWZ8kA0W6TUzrbWtzrvFrkZBvZw/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 kod shoutmix or chat box korang 

  <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>

lepas tu..korang paste dekat design>add gadget>html
then save..


**yang warna purple tu korang boleh tukar dengan gambar lain..boleh cari kat photobucket
 yang biru pulak saiz die..boleh ubah ikut citarasa korang ye..


4 comments:

Amirah Cantik said...

thanks! bestnyaaa!!!! \(^O^)/

myhatiku said...

oh..nak main sorok2 ye..nice sharing :)

LiLy @ MaMaQiStInA said...

bagus juga sorok2 ni kan..jimatkan ruang.. ;)

nina ibunga said...

tenkiuu 4 the tutorial.. :)