Hai Sobat Kali Ini Saya Akan Berbagi Pengetahuan Tentang Cara
Membuat ChatBox Tersembunyi Di Sebelah Kanan Blog. Taukan Gimana
Contohnya? Pasti Taulah! Gak Mungkin Seorang Blogger Yang Udah Lama Terjun Di
Dunia Yang Penuh Persaingan Ini Gak Tau Sama Yang Namanya "ChatBox".
Saya Sengaja Gak Masang ChatBox Di Samping Blog. Soalnya Kalo Pake Template Ini
Kelihatannya Kurang Rapih. Jadi Sengaja Saya Taruh Tombol Aja Di Bawah Blog.
Jadi Kalo Diklik, Akan Pindah Ke Page ChatBox. Coba Aja Dah Klik Biar Gak
Bingung. Nah Untuk Yang Kali Ini Dibahas Adalah ChatBox Tersembunyi Di Blog.
Coba Aja Deh Biar Gak Bingung.
1 . Sign Up Di CBOX
2 . Setelah Terdaftar Log in Terlebih Dahulu
3 . Atur Tampilan CBOX Sesuai Selera Anda
4 . Setelah Selesai Klik Tab PUBLISH Dan Get Code ( Copy Kode
Yang Berada Di Step 3 )
Kemudian :
Masuk ke Blogger, Pilih Tata
Letak - Add Gadget -
Pilih HTML/Javascript :Copy Code
Dibawah ini ke dalam Gadget HTML tersebut. Ganti
code Berwarna Biru dengan Code CBOX mu, Yang Telah Di Dapat Tadi .
<style
type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html
#gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png')
no-repeat;
}
.gbcontent {
float:left;
border:1px
solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright:
5px;
-moz-border-radius-topleft:
5px;
background:
#F2F2F2; url() no-repeat bottom;
padding:10px;
}
</style>
<script
type="text/javascript">
function
showHideGB(){
var gb =
document.getElementById("gb");
var w =
gb.offsetWidth;
gb.opened ?
moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened =
!gb.opened;
}function
moveGB(x0, xf){
var gb =
document.getElementById("gb");
var dx =
Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>
<div
id="gb">
<div
class="gbtab" onmouseover="showHideGB()"> </div>
<div
class="gbcontent">
<center><!--
BEGIN CBOX - www.cbox.ws - v001 -->
<div
id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe
frameborder="0" width="200" height="305"
src="http://www2.cbox.ws/box/?boxid=2347515&boxtag=tvzmgz&sec=main"
marginheight="2" marginwidth="2" scrolling="auto"
allowtransparency="yes" name="cboxmain2-2347515"
style="border:#48515A 1px solid;"
id="cboxmain2-2347515"></iframe></div>
<div><iframe
frameborder="0" width="200" height="75"
src="http://www2.cbox.ws/box/?boxid=2347515&boxtag=tvzmgz&sec=form"
marginheight="2" marginwidth="2" scrolling="no"
allowtransparency="yes" name="cboxform2-2347515"
style="border:#48515A 1px solid;border-top:0px"
id="cboxform2-2347515"></iframe></div>
</div>
<!-- END
CBOX -->
<br />
<div
style="text-align:center">
<span
style="float:right; color:#000000;">Get this <a
target="_blank"
href="http://azhariian.blogspot.com/2013/04/GuestBook-hide.html">
widget! </a></span>
</div>
</center></div>
<script
type="text/javascript">
var gb =
document.getElementById("gb");
gb.style.right
= (50-gb.offsetWidth).toString() + "px";
</script>
</div>
Simpan Dan Lihat Hasilnya Semoga Bermanfaat Dan Selamat
Mencoba ..
mantap sob
BalasHapusSiip (y)
Hapus