Chatbox atau biasa kita sebut buku
tamu merupakan widget yang penting untuk kita pasang pada blog kita. Penggunaan
Chatbox atau buku tamu adalah untuk memberi jejak bagi pengunjung yang
mengunjungi blog kita. Nah, kali ini saya akan membahas total tentang Cara
Membuat ChatBox Autohide di Blog Anda atau buku tamu yang bisa Autohide hanya
dengan dilewati oleh pointer mouse. Mau tau caranya? Lansung saja kita simak.
1. Login ke akun Blogger anda.
2. Pilih Blog yang anda ingin edit.
3. Nah, setelah itu klik Tata Letak (pada tata letak ini anda akan mendapatkan layout tata letak blog anda,
silahkan anda pilih dimana letak yang cocok untuk Chatbox ini)
.jpg)
Catatan : Jika memakai Blog Wordpress anda hanya
perlu membuka Dashboard >>>Appearance >>> Add Widget, nah setelah itu silahkan untuk menaruh Chatbox dilayout yang anda
inginkan
4. Setelah itu klik tombol Tambah
Gadget, gadget yang ditambahkan adalah gadget
tipe HTML/Javascript
5. Nah, tinggal masukkan kode scriptnya
aja. Berikut adalah kodenya.
================================================================
<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://www7.cbox.ws/box/?boxid=506946&boxtag=6csd0j&sec=main"
marginheight="2" marginwidth="2" scrolling="auto"
allowtransparency="yes" name="cboxmain7-506946"
style="border:#EDDEDB 1px solid;"
id="cboxmain7-506946"></iframe></div>
<div>
<iframe frameborder="0"
width="200" height="75"
src="http://www7.cbox.ws/box/?boxid=506946&boxtag=6csd0j&sec=form"
marginheight="2" marginwidth="2" scrolling="no"
allowtransparency="yes" name="cboxform7-506946"
style="border:#EDDEDB 1px solid;border-top:0px"
id="cboxform7-506946"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div
style="text-align:center">
<span style="float:right;
color:#000000;">Get this <a target="_blank"
href="http://tutorkeren.blogspot.com/2012/12/cara-membuat-chatbox-autohide-di-blog.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>
================================================================
Catatan : kalimat yang diberi warna merah silahkan anda ganti dengan kode script milik Chatbox anda.
Catatan : kalimat yang diberi warna merah silahkan anda ganti dengan kode script milik Chatbox anda.
6. Terakhir tinggal klik Save
Berikut adalah cara-cara untuk membuat Chatbox Autohide pada blog. Saya
berharap artikel Cara Membuat ChatBox Autohide di Blog Anda dapat bermanfaat bagi kita semua. Happy Blogging !!!!
Tidak ada komentar:
Posting Komentar