Tutorial Cara Membuat dan Memasang Cbox Auto Hide atau Buku Tamu di Blog

Tutorial Cara Memasang  cbox Auto Hide atau Buku Tamu di Blog

Apa kabar sahabat dunia blogger???

Apakah Baik-baik saja?

kalau baik, ucapkan kalimat HAMDALAH ( Alhamdulillahi Robbil 'Alamin)

Langsung saja kita ke TKP, saya akan menjelaskan sedikit mengenai auto hide Cbox .....
Auto hide Cbox adalah efek yang akan membuat buku tamu kamu muncul ketika pointer mouse menyorotinya, hanya perbedaannya sedikit sekali dengan buku tamu show / hide. Bagi kamu yang ingin memasang widget ini, silahkan baca tutorial ini dengan membaca Kalimat BASMALLAH bersama-sama ......

Bismillahirohmanirrohim .....

Langkah pertama, kita buat terlebih dahulu buku tamunya/chat box.

 Caranya ialah :

1)      Masuk ke alamat situs http://www.cbox.ws

2)      Klik “Get your own free Cbox now !”

3)      Isikan biodata kamu sesuai kolom yang disediakan dan pilih desain kesukaan kamu.

4)      Cbox kamu sekarang sudah jadi, kemudian kamu login akun kamu, isi username dan masukkan password yang sudah dibuat tadi.

 5)      Setelah kamu login, kamu akan masuk ke control panel home

6)      Copy script yang sudah jadi

Langkah kedua, Caranya ialah :

1. Masuk ke dashboard
2. Klik opsi lainnya--> tata letak --> Tambah gadget --> HTML/Javascript
3. Masukkan kode script dibawah ini pada kotak yang di sediakan.

 HTML/Javascript

<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('https://lh6.googleusercontent.com/-pAIJUMNChzw/UzF4Dh9Q3EI/AAAAAAAAADY/O7tXAn_fRjs/w426-h930/buku+tamu.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://www5.cbox.ws/box/?boxid=839171&amp;boxtag=24dr0b&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-839171" style="border:#ababab 1px solid;" id="cboxmain5-839171"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=839171&amp;boxtag=24dr0b&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-839171" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-839171"></iframe></div>

</div>

<!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://sistemkorelasi-xp7.blogspot.com"> 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>

  

           4.       Klik SAVE (simpan) 

Keterangan :
- Silahkan Ganti kode yang berwara Merah dengan kode script buku tamu milik kamu.

 

Alhamdulillah, selesai deh !

Semoga tutorial ini bisa membantu.
Terima Kasih atas kunjungannya.