Membuat Show Hide floating Guest Book

Hae sobat ketika kita mempunyai ilmu atau pengetahuan maka kita harus menularkan ke saudara dan teman teman kita. . . Apapun ilmunya apapun pengetahuannya yang penting berbagi. Nah sedikit yang saya ketahui untuk mempercantik tampilan blog seperti Cara membuat buku tamu untuk blogspot, wordpress, Website dan juga Wapsite.

Nah ini berbeda dengan Tips Tutorial saya yang kemarin, Tapi hampir sama juga sih? (funkydance)  Yang membedakan adalah cara keluar atau Hide to Show Guest Booknya yaitu dengan langsung keluar gitu aja kalo di klik beda lagi kalo yang kemarin keluarnya dengan perlahan lahan. Nah Untuk Wap Site silahkan Copy Kode Html di bawah ini. (bringit)

<div id="HTML1">
<div>
<style type="text/css">
.gb_fixed{
position:fixed;
top:123px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #ffffff;
background:#AC1615;
padding:10px;
padding-top:0px;
}
</style>
<div>
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>

<div><a href="javascript:void(0)" onclick="gb_showHideGB()">[Tutup]</a> Widget by <a

href="http://jidatbaok.com/membuat-guest-book-blogspot-wordpress-2.html"> Guest Book Created </a></div>
<center><iframe scrolling="auto" frameborder="0" width="285" marginheight="2" src="http://shoutmix.com/?jidat" height="305"

marginwidth="2"></iframe></center>
</td></tr></table></div>
<script src="http://jidatbaok.com/wp-content/uploads/2010/01/hiddengb2.js"></script>
<div style="z-index:+5">
<a href="javascript:void(0)" onclick="gb_showHideGB()">

<img border="0" style="border:0px" src="http://jidatbaok.com/buku-tamu.png"/>
</a>
</div>
</div></div>

Untuk Blogger atau blogspot silahkan Copy Code Html ntuk Guest Book Terbaru Caranya di paste pada bagian Widget ya, Yang HTML!

<!-- Begin Show Hide Floating - http://www.jidatbaok.com --> <style type="text/css"> #hitsukeFX{ position:fixed; top:30px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:108px; width:37px; float:left; cursor:pointer; background:url('http://jidatbaok.com/buku-tamu.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d241c7; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div onclick="showHidehitsukeFX()"> </div> <div>  <iframe marginheight="2" src="http://shoutmix.com/?jidat" marginwidth="2" width="285" frameborder="0" height="305" scrolling="auto"></iframe></br>
Silahkan Isi Buku Tamu anda!
<div style="text-align: right;"><a href="http://jidatbaok.com/membuat-guest-book-blogspot-wordpress-2.html"> Guest Book Creator </a> By <a href="http://jidatbaok.com/"> Jidat </a> <a href="javascript:showHidehitsukeFX()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://www.jidatbaok.blogspot.com -->

Nah untuk kalian yang punya blog CMS Wordpress silahkan buat guest book dengan kode di bawah ini! Dengan cara taruh Kode HTML di bawah ini di bagian Sidebar Widget atau di dalam Css.

<!-- Begin Show Hide Floating - http://jidatbaok.com --> <style type="text/css"> #jidatbaokdotcom{ position:fixed; top:30px; z-index:+1000; } * html #jidatbaokdotcom{position:relative;} .jidatbaokdotcomtab{ height:108px; width:37px; float:left; cursor:pointer; background:url('http://i683.photobucket.com/albums/vv193/vebyo/GuestPink.gif') no-repeat; } .jidatbaokdotcomcontent{ float:left; border:2px solid #d241c7; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidejidatbaokdotcom(){ var jidatbaokdotcom = document.getElementById("jidatbaokdotcom"); var w = jidatbaokdotcom.offsetWidth; jidatbaokdotcom.opened ? movejidatbaokdotcom(0, 40-w) : movejidatbaokdotcom(40-w, 0); jidatbaokdotcom.opened = !jidatbaokdotcom.opened; } function movejidatbaokdotcom(x0, xf){ var jidatbaokdotcom = document.getElementById("jidatbaokdotcom"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; jidatbaokdotcom.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movejidatbaokdotcom("+x+", "+xf+")", 10);} } </script> <div id="jidatbaokdotcom"> <div onclick="showHidejidatbaokdotcom()"> </div> <div>  <!-- Taruh Kode Shoutmix Kamu disini -->  <br/> <center><iframe scrolling="auto" frameborder="0" width="285" marginheight="2" src="http://shoutmix.com/?jidat" height="305" marginwidth="2"></iframe></center>
<div style="text-align:right"><a href="http://jidatbaok.com/membuat-guest-book-blogspot-wordpress-2.html"> Guest Book Creator </a> By <a href="http://jidatbaok.com/"> Jidat </a> <a href="javascript:showHidejidatbaokdotcom()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var jidatbaokdotcom = document.getElementById("jidatbaokdotcom"); jidatbaokdotcom.style.right = (40-jidatbaokdotcom.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://jidatbaok.com -->

Ayo Silahkan yang mau tanya lagi? kalo yang Cara membuat Buku Tamu Pertama memang kurang Support dengan berbagai Themes tapi kalo yang ini saya juga kurang tau apakah benar-benar ampuh untuk semua Blog!