http://2.bp.blogspot.com/_5PvhgEiOgm4/TFvRkkw-6zI/AAAAAAAAAMY/_CX5OFwTQY8/s400/post+buku+tamu.JPG

Guest Book dengan background, yang kalau diklik akan keluar form isian Nama, Website dan Message. Buku Tamu atau Guest Book tersebut melayang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap terlihat.

Untuk membuatnya ikuti langkah berikut :

  • Masuk ke Blogger
  • Klik Rancangan
  • klik Elemen Laman
  • klik Tambah Gadget
  • Klik "HTML/JavaScript"
  • Kemudian Copy/Paste kode di bawah ini :

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('http://1.bp.blogspot.com/_w-dfDljRV3Q/TRXJ-ExUXII/AAAAAAAAAn8/sl_ZVhQFU9c/s1600/buku+tamu.png') no-repeat; } .gbcontent{ float:left; 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.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <!-- BEGIN CBOX - www.cbox.ws - v001 --> Code CBox milik Anda <!-- END CBOX --> <br/>Mau buat buku tamu ini ?<br/>Klik <a href="http://studio.cahmagetan.com/2014/06/cara-membuat-buku-tamu-melayang.html"target="_blank"> di sini </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.right = (30-gb.offsetWidth).toString() + "px"; </script>

Keterangan :

Yang berwarna merah ganti dengan kode yang Anda peroleh dari Cbox
Pada kode diatas Icon Buku Tamu-nya seperti gambar disamping. Gambar dapat dingganti sesuai dengan kreasi Anda sendiri dengan terlebih dahulu mendesainnya di CorelDRAW maupun Photoshop, Kemudian upload di blogger atau hosting lain kemudian ambil URLnya dan pasang sebagai background.

Sekian dan semoga bermanfaat

Sumber : Belajar-CorelDraw.blogspot.com

 
Top