Cara Membuat Buku Tamu Show Hidden

Also Read Other Articles

Blog identik dengan Buku Tamu/Gueest Book yang di gunakan para pengunjung untuk Saran, Kritik, Masukan dan tukar Informasi dan sekaligus sebagai sarana Chatting apabila Blogger sedang Online.. Menurut kami cantik menjadi target utama dalam segala hal, namun tidak meninggalkan kode etik bagi seorang blogger. Oke tanpa banyak kata, Mari kita belajar bagaimana cara membuat Buku Tamu...

Daftarkanlah diri Anda di http://www.cbox.ws/
Lihat Gambar dibawah ini

1. Klik Get your own free Cbox now! 
2. Lakukan Customisasi, dari warna, Emotion / Smilies, Ukuran, Font dll, 
3. Ambillah/Copy kode HTML yang di berikan Cbox Nah Sekarang sobat sudah punya kodenya.. 

Sekarang Waktunya Bagaimana Cara memasang pada Blog sobat.

1. Masuk akun Blog sobat
2. Masuk di dasbor
3. Klik Rancangan Add Gadget HTML Java Script
4. Masukkan Kode dari Cbok di dalamnya
5. Klik Simpan

Bagaimana... Sudah jadi kaan... tapi kok standart ya... Masih di posisi Sidebar / di Fotter hee... Kalau begitu Mari kita pandu dengan cara sedikit menambahkan kode J Query

• Buka kembali gadget Cbox sobat
• Copy dulu kode Cboxnya dan taruh/paste di Microsoft Word atau di Notepad.   Jika sudah, 

Perhatikan Kode berikut :

<style type="text/css"> #at{ position:fixed; right:450px; z-index:+1000; } * html #at{position:relative;} .attab{ height:100px; width:30px; float:left; cursor:pointer; background:url(); } .atcontent{ float:left; border:4px solid #CC0000; background: #000; -moz-border-radius-topleft:30px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:30px; padding:10px; -moz-box-shadow: 0px 4px 5px 0px #0dc3ff; } </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.top = 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:#CC0000;"> MASUKKAN KODE CBOX SOBAT DISINI… OKEY.. SEMUANYA YA… HE..HE.. </div> </div> <br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTwo-I6IvcFhEoeFqH4WLMyeAUOgjZKvk71B-ioGSr0bmT-mwPBfWRkmiyD1pDE43YCLpVK9FTzUws6UVWCoEsSC5etgo37ciw7K25msApLNzpsyRdF2IZ48E1g9DEUJUDKuWZCLdwYH1F/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div> </div></div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script> <div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src=" http://i48.tinypic.com/x35udw.gif " /></a> </div>

• Masukkan / Ganti Kode Tulisan yang saya beri Warna Biru Muda dengan Kode Cbox Sobat,
• Terakhir Klik Simpan. 
• Lihat apa yang terjadi... Cantik kann... hee...he...

Kalau belum sesuai dengan yang diinginkan sobat bisa Editing sendiri baik di Cbox maupun HTMLnya..

• NB : Kode yang saya beri warna merupakan Kode dan alamat url gambar, jika kurang cocok gantilah dengan kode yang sesuai dengan Inspirasi Sobat.

Selamat Mencoba dan Salam Sukses !!!