Membuat Buku Tamu Melayang Dari Bawah

Pagi sobat blogger, pagi, pagi minum teh enak nih, plus buat posting juga mayan, udah hampir sebualan liburan sekolah, dan rasanya jenuh juga di rumah, gak ada pekerjaan tetap, maklum yah masih anak sekolahan,.

Sampai sekarang saya masih beruaha menampilkan yang terbaik di blog nih, and saya juga masih belajar, kadang yang saya kerjakan cuma coba-coba, mengutak-atik kode html, maklum lah kesukaan ama kode tuh, tapi masih kagak bisa juga kalo musti buat sendiri..

Tadi malem ane baru buat posting membuat buku tamu di blog dengan CBox (bacanya cebok), sebenarnya itu juga baru buat sendiri ane, hasil coba-coba, dan alhamdulillah berhasil-berhasil horee...

Tadi malem juga saya mengutak-atik kode html untuk buku tamu melayang yang saya dapet dari blog tetangga, sebenernya sih cukup sederhana, saya cuma mengubah cara keluarnya aja, yang sebenernya keluarnya dari atas sampai ke tengah dan kembali ke bawah, saya ubah menjadi dari bawah sampai mentok ke atas, dan kembali lagi ke bawah, kalau belum paham ya seperti punya saya di bawah tuh,

Ukeh lah, cukup udah penjelasan dan basa-basinya, mari kita mulai,

- yang harus sobat lakukan pertama adalah membuat buku tamu dari CBox (baca cebok) atau bisa juga dengan cebok-cebok yang lain (alias biku tamu yang lain). Kalau belum tau buatbuku tamu dari CBox silahkan klik disini

- sekarang seperti biasanya setelah dapet kode html dari buku tamu masing-masing, mari kita masuk ke Blog -> Tata Letak -> Tambah Gadget

- pilih HTML/Java script

- pastekan kode berikut di dalamnya

<style type="text/css"> #gb{ position:fixed; right:30px; z-index:+1000; padding: 5px 15px; } * html #gb{position:relative;} .gbtab{ height:0px; width:200px; float:center; cursor:pointer; background:url(blog-bg.pnf); } .gbcontent{ float:center; background:#fff; border-right: 5px solid green; border-bottom: 5px solid green; border-top: 5px solid green; border-left: 5px solid green; -moz-box-shadow: 0 10px 10px #AFE137; -moz-border-radius-topleft:1px; -moz-border-radius-topright:1px; -moz-border-radius-bottomleft:1px; -moz-border-radius-bottomright:1px; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 1500-w) : moveGB(1500-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <span style="color: rgb(102, 0, 0);">

</span> <center><a href="javascript:void(0);" onclick="showHideGB()"><input class="close" type="button" value="Close" /></a> </center></div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.top = (-400-gb.offsetWidth).toString() + "px"; </script> <a style="position:fixed;bottom:5px;right:100px;" class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXgcXsyci1yKEduDjUEcZ53p7IbHEFES7KL2FclKluF5J6vaAhqHIj1jiohQR0Q1u9BIrjlqUaq_HzzV99CHbbQu1kPoVZrJBC0x3KkocriOZ0yVnAdBTZYX29uPw83-y5CRpF-IlkRiU/h120/Buku+Tamu+tab.png" /></a>

Ket : Tulisan  silahkan diganti dengan kode buku tamu yang sobat dapet dari situs masing-masing (Punya saya menggunakan cebok)

- sekarang tinggal save dan lihat hasilnya..

Selesailah sudah, terima kasih, dan untuk yang mau tanya-tanya seputar buku tamu di atas silahkan comment..

^_^

Keyword :

membuat buku tamu melayang daribwah ke atas dan kembali ke bawah

cara membuat CBox melayang dari bawah

membuat guest book melayang

Pro Duck