<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/AVvXsEj14FI-M4OZzNas5v0BaMV2UaCjj8wl4vhwi4Gp0iyyFKs1SD1isX_snEg9GmNbO_ebYnvSumgZ5eitclRn1ExnJQ524Y2ftfa3tUW4uqtiMa97hr9f13RVTmEGdxATBbUb9r-rau2P6J6R/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">
<div id="cboxdiv" style="line-height: 0pt; text-align: center;">
KODE CHATBOX-MU TARUH DISINI!
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
7 Comment(s)
Click here for Comment(s)pertamaxxx...
Replywah aku malah baru tau cara buatnya, tapi lumayan ribet juga ya, banyak javascript nya. apa gak jadi berat blognya mas?
oiya mas soal tautan yg beda, maksudnya tampilan dari tautan itu berbeda satu dengan lainnya. Tautan1 bergaris bawah, Tautan2 tidak, hanya ada efek shadow. Itu cuma posting iseng aja, hehehe...
Reply@Mas Bibit: Thanks udah komentar. Iya memang membuat loading blog lambat. :) Untuk penjelasan tautan yang berbeda, thanks penjelasannya! :)
ReplySemuanya, maaf, salah ketik Judul! :)
jar iklanmuw keakean nggarai lamban ! :)
Replypayeh..
Replykagak bisa nge copas.. =_="
Perlu diketahui bahwa tidak semua browser menampilkan sempurna chat box melayang di atas. Bila menggunakan firefox, tampilan chat box akan menonjol ke depan (tidak enak dipandang). Maka ganti javascript terakhir dengan yang satu ini untuk mendapatkan kompatibilitas di berbagai browser (100% Tested):
Replyvar gb = document.getElementById("gb");
if (window.opera) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}
Best Regard,
http://debrianruhut.blogspot.com/
Update script terbaru untuk chat melayang..
Replyberguna untuk mendeteksi resolusi browser, karna sering kita temukan pada bwoser dengan resolusi 800 dengan 1024 hasil chat boxnya berbeda, yakni pada browser dengan resolusi 800 lebih maju (nongol), sedangnkan pada 1024, tampilannya normal:
Javascriptnya,
// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************
// for NN4/IE4
if (self.screen) {
width = screen.width
height = screen.height
}
// for NN3 w/Java
else if (self.java) {
var javakit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = javakit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
else {
// N2, E3, N3 w/o Java (Opera and WebTV)
width = height = '?'
}
var gb = document.getElementById("gb");
if (width==1024) {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}else if (width==1280) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";}
Salam hangat,
http://debrianruhut.blogspot.com
Take some minutes to give me any comments, critics, and suggestions. Your comments will make this blog to be more attractive [As soon as i read your comments]. Thanks for your comments! Conversion Conversion Emoticon Emoticon