Tutorial | Cara Hide Dan Tukar Tab Shoutbox

Salam to all readers..

Mesti korang pelik kan

tetiba kali ni Dil buat tutorial pasal blog pula

*biasanya tutorial photoshop je memanjang..heheh

Bukan apa, ada readers Dil

request tutorial pasal shoutbox yang letak gambar ni.

Alaa, shoutbox macam dalam blog Dil ni..

Actually senang je nak buat shoutbox macam ni..

Jum tengok tutorial yang Dil sediakan untuk korang..

Langkah 1

Log in blog>Dashboard > Layout > Add A Gadget.

Seterusnya klik pada HTML/Javascript.

Langkah 2

Paste kan code kat bawah ni dalam content HTML/JavaScript.

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:400px;

width:200px;

float:left;

cursor:pointer;

background:url('URL GAMBAR/ICON') 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, 100-w) : moveGB(90-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 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 = (100-gb.offsetWidth).toString() + "px";

</script>

Langkah 3

Klik untuk Save.

nota kaki:

URL GAMBAR/ICON

untuk mendapatkan URL gambar/ icon,

korang boleh uploadkan gambar korang dekat Picasa ataupun Photobucket.