Selamat datang kembali para blogger mania, tentunya bagaimana kabar kalian waktu ini, masih semangat merias blogmu !! Kali ini saya akan mengenalkan/mebagikan ilmu yg saya dapat, tentunya tidak salah kan ? Saya akan memberitahu cara membuat Buku tamu/Chatbox bukan sembarang chatbox, ini adalah Auto hide chatbox, chat box otomatis terbuka tanpa di klik dan tertutup tanpa di klik juga,
hebat bukan ?hanya dengan cara dilewati oleh pointer saja.
caranya juga cukup gampang/mudah.
Ada sedikit tambahan yg perlu diketahui, sebelumnya anda harus mendaftar terlebih dahulu di cbox.ws jika belum ?jangan khawatir, anda bisa mendaftar disini dan dijamin langsung jadi tanpa menunggu, setelah mendaftar ikuti langkah-langkahnya, hingga mendapatkan kode HTML.
langsung saja ini dia langkah-langkahnya :
1) Masuk/sign in ke blogspot anda
2) Pilih desain di pojok kanan atas
3) Klik tata letak
4) Add gadget/tambah gadget
5) Klik HTML/Javascript
6) Silahkan anda copy kode HTML dibawah ini :
<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=688387&boxtag=crh1t1&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-688387" style="border:#ababab 1px solid;" id="cboxmain7-688387"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=688387&boxtag=crh1t1&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-688387" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-688387"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://softwaremaniapc.blogspot.com/2012/12/cara-membuat-buku-tamu-auto-hide-di.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 PENTING !!!
Tulisan yg berwarna merah silahkan anda ganti dengan kode HTML yg sudah anda dapatkan (kode HTML blogspotmu)
Setelah itu SAVE, dan lihat apa yg terjadi di blogspotmu .
Semoga bermanfaat.
Terimakasih :)
ReplyDelete