Tutorial Cara Membuat Buku Tamu Melayang | Nempel | Floating | Terapung

Iseng nih Update Blog tentang Tutorial Blog, ya kali aja bisa berguna buat teman2 blogger lain... hehe
Cara yang akan saya tulis kali ini adalah cara membuat widget blogspot (gadget) buku tamu melayang / terapung / floating / menempel di dinding... teman2 mungkin sering melihat buku tamu (Shoumix/Chatbox) melayang saat teman2 berkunjung ke blog orang lain, memang banyak yang menggunakan widget ini, selain karena membuat tampilan buku tamu menjadi berbeda, juga berfungsi untuk menghemat tempat...
Tampilan buku tamu Melayang bisa kalian lihat seperti gambar dibawah ini :

Langsung aja ya, berikut ini langkah yang harus di lakukan untuk membuat widget chatbox/shoutmix melayang seperti ini :

1. Daftar Dulu di Shoumix atau di CBOX (Mungkin Kalian Sudah Banyak Yang Mengerti jadi saya tidak akan menjelaskan langkan membuat Shoutmix atau Cbox)
2. Login Ke Blogger
3. Masuk ke Bagian Rancangan - Elemen Laman
4. Klik "Tambahkan gadget" ==> Pilih "HTML/JavaScript"
5. Copy Script ini ke dalam gadget anda

<style type="text/css"> #nempel{position:fixed;top:65px;z-index:+1000;} * html #nempel{position:relative;} .nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #00008B url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguuGy-LB-Gn-LTM2X9JkKob8TXktJbMnRL3Pu4nnIb09O3hZHPV-t4Nv-Lc0Dy6GlAGqmqu15lEnRDa-e0DhD_71DJ6KW8vUsmbLT8BiIg6MzRLPgMVR_eK7xV5Mpe8v2hLYDcUobT5RE/s104/buku-tamu.png')no-repeat;} .nempelisi{float:left;border:2px solid #00008B;background:#CCFFFF ;padding:8px;} </style><br /> <script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script><br /> <div id="nempel"><div class="nempeltab" onclick="showHideNempel()"></div><div class="nempelisi"><!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="catatanmathin" src="http://www.shoutmix.com/?catatanmathin" width="100%" height="460" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?catatanmathin">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix --><br /> <div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div><span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://catatanmathin.blogspot.com/2011/07/tutorial-cara-membuat-buku-tamu.html" target="_blank">Widget by Catatan Mathin (Blog game)</a></span><br /> </div></div><script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

6. Setelah itu ganti <---- Isi Dengan Kode Buku Tamu Kamu -----> dengan kode buku tamu yang sudah kamu punya (Shoutmix atau Cbox)

7. Simpan lalu lihat hasilnya

Selamat Mencoba, Semoga Artikel ini Bermanfaat ya...... jangan Lupa Komentarnya dan kunjungi terus blog saya....

Posted in: Blog,Tutorial,Widget Blog