Panduan Cara Buat Buku Tamu Melayang Tersembunyi di Sisi Blog

Sobat blogger kali ini saya akan memberikan tutorial Cara Buat Buku Tamu Melayang di Blog. Buku tamu ini akan menempel di sisi blog sobat dan disertai dengan fitur tersembunyi, jadi buku tamu akan tampil ketika diklik. Buku tamu melayang ini berfungsi untuk mengurangi widget yang menempel di Blog sobat, jadi blog sobat akan terlihat rapi. Cara ini prinsipnya sama dengan cara buat widget share melayang di blog, namun bedanya hanya sedikit.

Sebenarnya cara ini sudah umum di kalangan blogger, namun mungkin saja sobat belum ada yang tau, jadi sobat bisa gunakan tutorial ini. Untuk contohnya sobat bisa lihat di sisi blog ini buku tamu blog ini melayang di sebelah kiri seperti jua terlihat pada gambar di atas. Sobat bisa ikuti cara berikut untuk membuatnya :

Cara Buat Buku Tamu Melayang Tersembunyi di Sisi Blog

1. Sobat buka dasboard blog sobat.

2. Klik Design => Page Element

3. Setelah itu klik Add Widget dan pilih HTML/JavaScript, nah dalam kotak yang tersedia sobat copykan code berikut ini ke dalamnya,

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:40px; float:right; cursor:pointer; background:url('http://4.bp.blogspot.com/-iPXvMIyL8rA/T__sL8yYwWI/AAAAAAAAEFY/B750mK3aY3E/s1600/Logo-bukutamu-mankita.blogspot-.png') no-repeat; } .gbcontent{ float:right; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent">    ==>> Masukkan Code Cbox atau buku tamu sobat di sini <<==<a href="http://mankita.blogspot.com/"target="_blank"> Guestbook </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.left = (30-gb.offsetWidth).toString() + "px"; </script>

Untuk mengganti posisi buku tamu dari kiri => ke kanan sobat ganti tulisan Left diatas dengan Right dan ganti tulisan Right di atas dengan Left.

4. Jangan lupa Ganti  tulisan warna merah tersebut dengan kode Cbox / buku tamu sobat..

5. Untuk judul kosongkan saja. Karena widget ini akan tersembunyi dengan sendirinya..

6. Jika sudah sobat klik SAVE / Simpan..

Nah, sekarang sobat lihat di blog sobat, silahkan refresh blog sobat.. Semoga berhasil sob...

Source Link : bukutamu

Related Post:

Mau artikel seperti Panduan Cara Buat Buku Tamu Melayang Tersembunyi di Sisi Blog langsung dikirim ke email? Silahkan masukkan Email Anda di bawah untuk berlangganan:

Masukkan Email di Sini: Lalu Konfirmasi di Email

Kami Menjamin Informasi Anda.