Membuat Buku Tamu Unik

Sekarang ini masih ramai digunakan dan diminati oleh para bloggers untuk menampikan buku tamu tersebut dapat disembunyikan dan dikuka dengan mengeklik tombol yang disediakan. Seperti milik saya yang bisa teman-teman lihat dengan mengeklik tombol Buku Tamu di sisi kanan halaman blog.

Selain hemat tempat, cara ini juga menambah ganteng/cantik blog teman-teman lo.. Mau mencobanya? Silakan ikuti langkah-langkah berikut ini:

• login ke blogger
• kemudian masuk ke halaman Layout
• klik Add Gadget
• kemudian pilih HTML/Javascript
• copy dan patekan code berikut ini

 <style type="text/css"> #at{ position:fixed; right:35%; z-index:+1000; } * html #at{position:relative;} .attab{ height:0px; width:0px; float:top; cursor:pointer; background:url(url); } .atcontent{ float:left; border:2px solid #fff; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwy6QcpGmcATcD28czZ7VmBir5pu4kK7ze9CcisoFZgj_10ThHFYk0GuK1dHshckt2GQlnfr6tiYiyI0QTuWZcPHV-PLfzba2miN7iT0n32knyaOmi_V0cFU2bGGvpFf8zdRt2KNy1JsW/)#000000 repeat-x bottom center scroll; -moz-border-radius:10px; padding:10px; } .atcontent:hover{ border:2px solid #fff; background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;"> Strip kode cbox sobat </div> </div> <br /> <div align="right"> <a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div> </div> </div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.bottom = (-200-at.offsetWidth).toString() + "px"; </script>

•  save/simpan

keterangan : (gunakan bantuan CTRL+F)

• right:35%;  adalah jarak cbox dari sisi kanan, bisa disesuaikan sendiri

• Strip kode cbox sobat, adalah tempat meletakkan kode cbox yang akan ditampilkan

• url-url dibawah ini adalah alamat gambar yang akan digunakan, silakan diatur sendiri sesuai selera

http://petir-project.googlecode.com/files/zuaz-petir.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYwy6QcpGmcATcD28czZ7VmBir5pu4kK7ze9CcisoFZgj_10ThHFYk0GuK1dHshckt2GQlnfr6tiYiyI0QTuWZcPHV-PLfzba2miN7iT0n32knyaOmi_V0cFU2bGGvpFf8zdRt2KNy1JsW/

http://i53.tinypic.com/oiu4n9.gif

http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png

Selanjutnya cara membuat tombol untuk menampilkan cbox nya :

• tetap login di akun blogger anda
• masuk di menu Layout
• kemudian Add gadget
• lalu HTML/Javascript
• copy dan paste kan kode berikut

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"> <a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGCHxhNbTK5DR4talXvOSog9ydik1BKgpvR_XPcoeDL-10wcz6Qyijj93u_OV1XQbOupM9Tr9eixwXz0W7ZrpdsutA0AlSZ6HfujqvNJoibT7-DUcxcJdSCuq3ccUHEmaDRr11CLP26lR/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

keterangan :

• kode ini top: 55px; right: adalah posisi dan jarak tombol

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBGCHxhNbTK5DR4talXvOSog9ydik1BKgpvR_XPcoeDL-10wcz6Qyijj93u_OV1XQbOupM9Tr9eixwXz0W7ZrpdsutA0AlSZ6HfujqvNJoibT7-DUcxcJdSCuq3ccUHEmaDRr11CLP26lR/s128/guestbook.png adalah link gambar

Demikian cara membuat buku tamu yang unik dan dapat disembunyikan.

Selamat mencoba.

Sumber: http://zuazz.blogspot.com/2012/04/cara-lengkap-memasang-buku-tamu-cbox-di.html

• Facebook
• Twitter
• StumbleUpon
• Digg
• Delicious
• Reddit
• Technorati