Shoutbox Buka Tutup aka Keluar Masuk beserta tukar gambar

January 28, 2011 iPai 11 Comments

Salam

Maka dengan itu aku nak kongsi. Sekarang ini dah jadi pattern dan trend Shoutbox Buka Tutup dan juga Keluar Masuk kat tepi tuh.. Nak tengok sample aku punya, sila lihat kat 'Baa ...' atas kanan tuh ..

Pertamanya, mari kita bagi kredit kepada Eriyza yang saya kira sumber kod-kod ini. Sebab aku tak pandai kod css script ini, tapi pandai cuba-cuba jaya je. Dan aku berjaya tukar macam aku buat kat atas tuh.

Maka, ini adalah sample shoutbox asal. Sila klik kat sini, untuk mengambil kod asal cik Eriyza. Sila cakap thank u kat dia juga ye. Saya tak pasti kalau Cik Eriyza ni ada buat post sambungan pasal post tersebut, kalau terSAMA dengan post ini, minta ampun Cik Eriyza
ShoutBox Eriyza
Maka seterusnya aku mahu bagi link untuk korang guna pulak.

Haa Kalau sesiapa yang berminat untuk guna gambar macam ni, boleh amik kod kat bawah tuh ek

Orait cam na nak guna kod bawah ni;

Pastikan anda dah LOGIN

Klik ke DASHBOARD. Kemudian, klik ke DESIGN, kemudian ke PAGE ELEMENT

Klik ADD A GADGET, pilih HTML/JAVASCRIPT, kemudian Copy Paste, kod yang diberikan dibawah ini.

Dalam kod yang diberikan di bawah ini, sila Cari '<Put Your ShoutBox code in here>' dan copy paste kod shoutbox anda di situ tanpa meletakkan '<' dan '>'


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:200px;
width:200px;
float:left;
cursor:pointer;
background:url('http://1.bp.blogspot.com/_aiMVEzWwL28/TT6s_U6dG6I/AAAAAAAAANY/jRXkQMj5Y5I/s1600/tag1.gif') 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, 150-w) : moveGB(150-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">

<Put Your ShoutBox code in here>

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

Ok, sila bagi feedback dan kalau ok, saya akan buat yang lain pulak. Hee ...

11 comments:

thanks atas tunjuk ajar tu ,
hari tu , warna header agak blurr , now dah okay ,
cube apai tgok ,
okay takk ?

Eriyza said...

Amboi, besopan santun sungguh
kredit yang diberi. Hehehe!!! :)

p/s : Apai, buang ler word verification tuh. Tak smart arrr! :p

iPai said...

mai ~ wah .. dah cantik dah .. bagus2 ..

Eriyza ~ hee .. kire ok laa kan ??

word verification tuh bukan untk elakkan kena spam ke ??

miss puteri said...

ala... dia ade gambar.. kita buat takde gambar. tak acila cam niee

iPai said...

er .. gambar juga ... cuma gambar dia lain la .. ak tempah yg sendiri punya ke ?

Bulat said...

ok!!Tq..kite gn tau..

iPai said...

@Bulat
sama2 .. jemput2 k ..

aku ckup x ske la shoutbox cmni pai.bkn apa..


kdg2 lembab la dia nk kua.terkedek2..pastu klu tenet slow mmg lgsg x kua la.

baik pki lekat biasa tu je.

Lurunna said...

salam...

mintak izin guna ye.. :)

BloomSyaz said...

saia pownn gune abg unyew kod uh ok .

nice...
thankz...