Senin, 25 Juni 2012

CARA MEMBUAT BUKU TAMU TERSEMBUNYI DI BLOG

Kali ini kita akan belajar tentang cara membuat buku tamu tersembunyi di Blog, agar Blog tampak lebih rapih dan Box buku tamu tidak memakan tempat di Blog. Buku tamu ini bisa kita sembunyikan di sebelah kanan atau kiri,  Ini tentu saja membuat widget Cbox terlihat lebih professional dan menarik, serta tidak memakan ruang di sidebar.




Lalu, bagaimana membuatnya? Tidak terlalu sulit, ikuti langkah berikut:
Kalau belum punya account buku tamu, bisa daftar di http://www.cbox.ws
Klick Sign Up dan isi identitasnya
Kemudian klik public dan ambil script yang sudah di sediakan (kopi kodenya).
seperti gambar berikut: 


Kita Lanjut Langkah berikutnya:
1. Log in ke akun Blog kamu
2. Pilih Desain-->Tata Letak-->Add Gadget-->lalu pilih HTML/JavaScript
3. Lalu copy dan paste-kan kode berikut ini:

<!-- left hidden chatbox by http://speedy-indonesia-08.blogspot.com START -->
<style> #hcl { position:fixed; top:135px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:30px; float:left; cursor:pointer; background:url('http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/393656_2400861740213_1211158261_31829773_579178586_n.jpg') no-repeat; } .hclcontent { float:left; border:4px solid #5F9EA0; background:#F5F5F5; padding:3px; } .hc-credit {font-size:9px}
.hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent">


PASTE-KAN KODE HTML CBOX KAMU DI SINI

<div style="text-align: right; font-size: 10px;">
Widget by
<a href="http://www.andrepanggabean.com">
AndrePanggabean.com
</a>
</div>



4. Lalu Klick Simpan

OK !!! Lihat Hasilnya

Kode warna Kuning dapat diganti, sesuai dengan posisi buku tamu keinginan kamu, tapi atur juga stylenya.


Tidak ada komentar:

Posting Komentar

Star