Cara Bikin Buku Tamu Melayang Di samping Blog

Pernah tidak melihat sebuah blog yang di samping kanan atas ada tulisan Buku Tamu dengan background hijau, yang kalau diklik akan keluar form isian yang menanyakan Nama, Website dan Message. Buku Tamu tersebut melayang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap nampak. Mau tahu caranya?

1. Sign in ke blogger dan silahkan Login dengan Account Anda
2. Pilih Layout/Tata Letak
3. Pilih Page Elemen/Elemen Halaman
4. Klik Add a Gadget/Tambah Gadget
5. Lalu pilih "HTML/JavaScript"
Kemudian Copy-Paste kode di bawah in :

   

<style type="text/css"><br>#gb{<br>position:fixed;<br>top:50px;<br>z-index:+1000;<br>}<br>* html #gb{position:relative;}<br>.gbtab{<br>height:100px;<br>width:30px;<br>float:left;<br>cursor:pointer;<br>background:url('http://i365.photobucket.com/albums/oo98/gondrezt/Green%20Blog/tabs2.gif') no-repeat;<br>}<br>.gbcontent{<br>float:left;<br>border:2px solid #00960e;<br>background:#015108;<br>padding:10px;<br>}<br></style><br><script type="text/javascript"><br>function showHideGB(){<br>var gb = document.getElementById("gb");<br>var w = gb.offsetWidth;<br>gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);<br>gb.opened = !gb.opened;<br>}<br>function moveGB(x0, xf){<br>var gb = document.getElementById("gb");<br>var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br>var dir = xf>x0 ? 1 : -1;<br>var x = x0 + dx * dir;<br>gb.style.right = x.toString() + "px";<br>if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br>}<br></script><br><div id="gb"><br><div class="gbtab" onclick="showHideGB()"> </div><br><div class="gbcontent"><br><div align="center"><br><br><!-- BEGIN CBOX - www.cbox.ws - v001 --><br><div id="cboxdiv" style="text-align: center; line-height: 0"><br><div><iframe frameborder="0" width="200" height="305" src="http://www2.cbox.ws/box/?boxid=2162296&boxtag=sr9qpq&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#EAB412 1px solid;" id="cboxmain"></iframe></div><br><div><iframe frameborder="0" width="200" height="75" src="http://www2.cbox.ws/box/?boxid=2162296&boxtag=sr9qpq&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#EAB412 1px solid;border-top:0px" id="cboxform"></iframe></div><br></div><br><!-- END CBOX --><br><br></div></div><br><script type="text/javascript"><br>var gb = document.getElementById("gb");<br>gb.style.right = (30-gb.offsetWidth).toString() + "px";<br></script></div>

Artikel Terkait Lainnya