Seruyan Blogger - Membuat Show Hide Floating Menu

Hmm..Show Hide Floating Menu ‘Chatbox’ atau yg lebih enak dengernya ‘buku tamu’ ternyata keren euyy.!!. Selain itu bikin blog kita sedikit lega..bahkan ada sobat blogger Iplock yang request pengen yang seperti ini juga, ya udah akhirnya aQ coba nulis postingan ini deh...
Klo gitu ikutin petunjuknya seperti dibawah ini ya..

Contoh Gambar
LIVE DEMO

• Login dulu ke blogger.
• Pilih Layout kemudian pada page element pilih Add Gadget (Sebenarnya gak mesti tambah gadget baru sih. Bisa juga di selipin di Gadget yg sudah terpasang.)
• Pilih yang HTML / Javascript
• Copy kode berikut ini kemudian Paste kedalam gadget (HTML / JavaScript) tadi.
  

<style type="text/css"><br />#gb{<br />position:fixed;<br />top:150px;<br />z-index:+1000;<br />}<br />* html #gb{position:relative;}<br /><br />.gbtab{<br />height:450px;<br />width:30px;<br />float:left;<br />cursor:pointer;<br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz1EueRhf3cS_qI6D2DNWXXwG5yidflSDAyzrQKrHLZUxL5africO2i7rk0aZnTaZ_nNnaGfprt3fRo1iNSQ90yrbVZKd2wHV7zy7hUTv0edH_Lx8INbVm5FTudJDzHiP1kYNrQazdOUg/s400/cbblue.png') no-repeat;<br />}<br />.gbcontent{<br />float:left;<br />border:2px solid #A5BD51;<br />background:#F5F5F5;<br />padding:10px;<br />}<br /></style><br /><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 /><br /><div id="gb"><br /><br /><div class="gbtab" onclick="showHideGB()"> </div><br /><br /><div class="gbcontent"><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="325" src="http://www5.cbox.ws/box/?boxid=655801&amp;boxtag=x34kak&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div><br /><div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=655801&amp;boxtag=x34kak&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div><br /></div><br /><!-- END CBOX --><br /><br /><div style="text-align:right"><br /><a href="http://seruyanblogger.blogspot.com/2010/03/seruyan-blogger-membuat-show-hide.html"><br />[Mau Chatbox seperti ini..]<br /></a>|<a href="javascript:showHideGB()"><br />[Tutup]<br /></a><br /></div><br /><br /></div><br /><!-- End ShoutMix --> <br /><br /><script type="text/javascript"><br />var gb = document.getElementById("gb");<br />gb.style.right = (30-gb.offsetWidth).toString() + "px";<br /></script></div><br /><br /><br /><br /><script src='http://upex.fileave.com/bintang/<br /><br />red<br /><br />.js'type='text/javascript'/></script><br /><br />

• Setelah itu jangan lupa di SAVE ya..

Selebihnya silahkan berimprovisasi sendiri dah
Biar tampilannya lebih pantas di blog Anda.

Selamat Mencoba
Semoga Berhasil