Cara membuat shoutbox tersembunyi dan tambah gambar di sebelahnya

nampak tak kelibat shoutbox 2...mcm la org x nampak....hehe

ooo....dia bawa kotak sembang pulak.....ngeee~~

Salam semua, mesti ada di antara korang ni yg mahukan shoutbox sebegini rupa kan??….di cini aq kongsikan cara-cara membuat shoutbox spt shoutbox aq kat sebelah kanan blog aq ni...’SHARING IS CARING’...xpa, walaupun ada yg dah tw 2 komen ja klu t’silap ajar yar…

Jom ikut cara2 di bawah:

langkah 1 : klik Design,
langkah 2 : Add A Gadget,
langkah 3 : HTML/Javascript,

langkah 4 : Copy dan paste kod di bawah pada content HTML/Javascript,

<style type="text/css">

#gb{position:fixed; top:50px; z-index:+1000}

* html #gb{position:relative}

.gbtab{height:300px; width:310px; float:left; cursor:pointer; background:url('http://paste’kan direct link anda di sini.png') no-repeat}

.gbcontent{float:left; border:0px solid #666; background:#fffffg; 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">

(copy & paste html shoutbox anda di sini)

<div style="text-align:right">

<a href="javascript:showHideGB()">

</a>

</div>

</div>

</div>

<script type="text/javascript">

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

gb.style.right = (30-gb.offsetWidth).toString()+"px";

</script>

Langkah 5 : Preview dulu kalau tak ada problem,
langkah 6 : Save.

CHOOPPPP!!

masukkan gambar?? -  perlu diingat anda perlu menyediakan gambar yg hendak dimasukkan terlebih dahulu di dlm PC anda, set kan brapa saiz gambar yg anda mahu , spt yg saya bt 300(width) x 400(height).

Dari mana mau dptkan direct link/url?? - utk dapatkan direct link/url pic kmu 2 dgn mudah, buka photobucket & upload pic kmu 2 di sana, bagi yg sdh register 2 xpa la…tp bg yg blum 2, apa tggu lagi...

Sdh upload?? - ok…copy direct link di bawah pic yg kmu uploaded 2 then paste’kan ke dalam tulisan yg b’highlight merah spt dlm langkah 4.

Tulisan yg b’highlight biru 2 utk apa? – ok, teman2 ku sekalian, tulisan yg b’highlight biru 2 digunakan utk m’adjust kedudukan gambar di sebelah shoutbox kmu 2….

GOOD LUCK~~~