CARA PASANG CHAT YAHOO (PINGBOX) DI BLOG

1. login akaun yahoo korang. lepas tu pergi ke link nie..

http://id.messenger.yahoo.com/pingbox/

2. klik 'nuat pingbox'

3. klik edit 

4. seting ape yang korang nk kat situ lepas tu klik lanjut

5. ok da.. kat situ korang klik blogger lepastu copy to clipboard

ok da copy kan?

kat situ ade 2 cara..

sama ada korang nk macam aku,, tgk dalam gambar.

cara 1.. utk buat macam aku..

1. Log masuk ke blog => Dashboard => Layout => Add A Gadget. dan pilih HTML/Javascript.

2. korang  letak code bawah nie

<style type="text/css">

    #gb{

    position:fixed;

    right:450px;

    z-index:+1000;

    }

    * html #gb{position:relative;}

    .gbtab{

    height:100px;

    width:30px;

    float:left;

    cursor:pointer;

    background:url();

    }

    .gbcontent{

    float:left;

    border:2px solid  #99CCFF;

    background:#ffffff;

    -moz-border-radius-topleft:15px;

    -moz-border-radius-topright:15px;

    -moz-border-radius-bottomleft:15px;

    -moz-border-radius-bottomright:15px;

    padding:10px;

    }

    </style>

    <script type="text/javascript">

    function showHideGB(){

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

    var w = gb.offsetWidth;

    gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);

    gb.opened = !gb.opened;

    }

    function moveGB(x0, xf){

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

    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

    var dir = xf>x0 ? 1 : -1;

    var x = x0 + dx * dir;

    gb.style.top = x.toString() + "px";

    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

    }

    </script>

    <div id="gb">

    <div class="gbtab" onclick="showHideGB()"> </div>

    <div class="gbcontent">

LETAK CODE YAHOO PINGBOX KORANG KAT SINI

    <center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

    </center></div>

    </div>

    <script type="text/javascript">

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

    gb.style.top = (-400-gb.offsetWidth).toString() + "px";

    </script>

    <a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Live Chat"><img alt="Live Chat" width="205" heigth="50" src="http://i1162.photobucket.com/albums/q524/Ulul_Azmi/shoutbox2copy_zps4e0cd39d.jpg" border="0" /></a>

dekat text warne merah tu korang letak code yahoo pingbox korang..

cara 2.. autohide

1. Log masuk ke blog => Dashboard => Layout => Add A Gadget. dan pilih HTML/Javascript.

2 korang letak code bawah nie

<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/AVvXsEjYr4AHFTn6dcMmsyP-rpNe-E3Ys4tp9g1E8I7aGETa10I2m-C-SElpxUZ0eqvd9HEFnwfHlJ2Obzyqx5sE6a-CU6In7RPQAtPTboNDt68xPxwHaohNO_DI69-996gxI6fRRAC6YYhhUUPC/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 Shout Box 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>

dekat text warna merah tu korang letak code yahoo pingbox tadi

lepas tu save.. selamat mencuba..