Cara Membuat Buku Tamu Auto Hide di Blog


Langsung aja ya.. untuk menambah selain komentar di blogger, wajib nih pake buku tamu, model buku tamu ini bisa ditaruh di kiri atau kanan blogger kalian.  Tapi sebelum praktek harus login ke www.cbox.ws gratis kok. 

1. Pertama sobat bisa mendaftar / daftar akun cbox dengan cara buka situs web www.cbox.ws lalu klik Sign up

Cara Membuat Buku Tamu Di Blog Gratis Terbaru

2. Kemudian isi kotak pendaftaran seperti cbox name (tidak boleh pakai spasi), email address (alamat email), password, confirm password dan website sobat serta centang "I agree to the Cbox terms and cconditions of service" jika sudah klik Create my Cbox!

Cara Membuat Buku Tamu Di Blog Gratis Terbaru

3. Cbox Created, akun sobat telah terbuat lalu klik Log in untuk masuk ke dalam Cbox

Cara Membuat Buku Tamu Di Blog Gratis Terbaru

4. Setelah itu masukkan Account name dan password yang tadi baru dibuat lalu klik Log in

Cara Membuat Buku Tamu Di Blog Gratis Terbaru

5. Maka akan muncul halaman cbok sobat lalu scroll ke bagian bawah untuk mendapatkan kode nya

Cara Membuat Buku Tamu Di Blog Gratis Terbaru

6. Berikut embed code cbox, silahkan copy kode tersebut

Cara Membuat Buku Tamu Di Blog Gratis Terbaru

jika sudah  saat nya membuat Auto hide Shuotbox, Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.

<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="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div>
<div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://http://pinowbe.blogspot.co.id/2016/12/cara-membuat-buku-tamu-auto-hide-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>
 

Caranya :
  1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
  2. Masukkan kodenya di kotak yang di sediakan.
  3. Hapus warna biru dan isi embed code cbox kalian,
  4. Klik Save 
Tambahan :
untuk mengganti icon/background chat box bisa diambil ini :

1. http://4.bp.blogspot.com/-8gN9mYWBNmc/UOuyweC6Z2I/AAAAAAAABYI/TygRZ3SafbY/s1600/buku+tamu+orange.png


2. http://1.bp.blogspot.com/-2pPjCWg1wJY/UOuyvT7XrBI/AAAAAAAABX8/lbPHt2JK5fA/s1600/buku+tamu+kuning.png


3. http://2.bp.blogspot.com/-AehfZePXAE8/UOuyvelZw-I/AAAAAAAABYA/b6TFxcLuS8A/s1600/buku+tamu+merah+muda.png


4. http://1.bp.blogspot.com/-lk2Pns5rHTw/UOuywIvEotI/AAAAAAAABYE/shf75sfGdmo/s1600/buku+tamu+merah.png


5. http://1.bp.blogspot.com/-CzYp5uQeGkk/UOuywx1lAHI/AAAAAAAABYc/o-rVl_bM9Sw/s1600/buku+tamu+ungu.png


6. http://3.bp.blogspot.com/-lFHx2PahMA0/UOuywSoVxWI/AAAAAAAABYM/cYQ5S3qwRhk/s1600/buku+tamu+pink.png


7.  http://4.bp.blogspot.com/-r-q3VzDNJLk/UOuyvdAsAKI/AAAAAAAABX4/DgLuMLTfSKs/s1600/buku+tamu+biru.png

ganti script  "background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;" (tanpa tanda petik) yang di blog ganti aja dengan pilihan diatas..

selesai.


0 komentar: