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
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!
3. Cbox Created, akun sobat telah terbuat lalu klik Log in untuk masuk ke dalam Cbox
4. Setelah itu masukkan Account name dan password yang tadi baru dibuat lalu klik Log in
5. Maka akan muncul halaman cbok sobat lalu scroll ke bagian bawah untuk mendapatkan kode nya
6. Berikut embed code cbox, silahkan copy kode tersebut
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!
3. Cbox Created, akun sobat telah terbuat lalu klik Log in untuk masuk ke dalam Cbox
4. Setelah itu masukkan Account name dan password yang tadi baru dibuat lalu klik Log in
5. Maka akan muncul halaman cbok sobat lalu scroll ke bagian bawah untuk mendapatkan kode nya
6. Berikut embed code cbox, silahkan copy kode tersebut
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>
<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>
#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&boxtag=ebc39c&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&boxtag=ebc39c&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 :
- Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
- Masukkan kodenya di kotak yang di sediakan.
- Hapus warna biru dan isi embed code cbox kalian,
- Klik Save
untuk mengganti icon/background chat box bisa diambil ini :

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoUozgLicefW0fQrwJshwZM3nIWnnk4FzxNkON5BedyHrjmVF1S6pszND8VZKX9-wD6sWdZZbE5H6uogKGNnLMxQxzV8iuSLHx8FETSAItj6yoSTLectr36HkvCjh8lPhivwkd3ZtBxHYH/s1600/buku+tamu+orange.png 2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqMVHe1khtFpwMa0wPeYcm1d1x8lK79d3Upiv833y7MESx50DNS0p_1ZC_ZDOUClYWKCYDHBBnNnKv5BNKoDzi2KfOwgMcyAMIrVpnj_INcpnYLmfhq7kTRuZnmV_VV2etlq7dMCaquqcP/s1600/buku+tamu+kuning.png 3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8rChiVxSlCUAKljuwOFELAVNCws1d_2Jddz-_uWU2q6ctdwHIVzjHaTS9vm4qslC1WZ90MNT995FqBBjsIVo_eQBQYGwNmF-oxsh-JqDmwkUSZsek_g6BCqLPWNtnPg3lX5EoqzV_gUCL/s1600/buku+tamu+merah+muda.png 4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-AIbges0dtGRUM1TMNKGMYFejUENmQiNNtMcscOZBZFTUVvZxM2iT-fh7mMpX-iLOB165-iUwJNhTkvWrHW5p_P_sJvjYAN0r65SD_UnciMc-E76_Ji0D4ppqdbNvvQ4KvddBKIoyFL1/s1600/buku+tamu+merah.png 5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFR4YpLmUP66SDQCG9Z9tOgzMy3BiuLRbyEY2k9Z-KrXHywRN6ATP5LiLfXsa5hCtydIuoyjahuZbc-YxEJMwoDm8sfpqJJSJ7DRBzd5zEZ3DtGrHmsV_8adgqw8JUmDEqA4HIf3SvvmOV/s1600/buku+tamu+ungu.png 6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMqwJsULapnU7t56yzJCk2h9mf_JHMlPYyOwsgYspyBHWYaJ3LGU_vifkOuEZQUqY3Q5ko6q8LZYfcQ9gLySxFGveLZfE-2-uyu7qatYwqaiyAFR48ul-9V9OV6OqdMOY_ScMO84-GLoCG/s1600/buku+tamu+pink.png 7. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir9r4gnvVcvGjpcvz8I8eK6DEqUJa_VqgQVZtNcm3uYIWHO5pyraYO8SivHmDPYq_x19i8B3k9LE4SjjHxTtpHMdUSS4kXECLs6cx3ayOillF9Sd6PtbcpYc8MrjFJ6WJ_fexnDNUgjtvo/s1600/buku+tamu+biru.png