Cara Membuat Buku Tamu (Guestbook) Buka/Tutup Di Pojok Kiri Blog

Cara Membuat Buku Tamu (Guestbook) Buka/Tutup Di Pojok Kiri Blog, Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Setelah dan sebelum disorot mouse.

Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat :

<style type="text/css">
#gb{position:fixed;top:20px;z-index:+1000;}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1Zl4MPTbjNIzSmiWVpCFgcLDdTbRn1v8cSFcQpRBytK8HI_twO6ZZst1-ewnkEm27VbqVlLhzoj-nbBSJFPcgjMYI1n1ePTRjYXlj9qY3_wtO_SBgJCOARS4QN0h7InRIS40E6EnVTg/s1600/bukutamu.gif') no-repeat;}
.gbcontent {float:left;border:1px solid #ccc;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;}
</style>
<script type="text/javascript">
function showHideGB(){var gb = document.getElementById("gb");
var w = gb.offsetWidth;gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;} function moveGB(x0, xf){
var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);} }</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>

<form name="contact-form">Nama <br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br /> <br /> Email <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br /> <br /> Isi Pesan <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script><br /> <script type="text/javascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1215376661229040519';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1215376661229040519','//www.bungfrangki.com/','1215376661229040519'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '1215376661229040519', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script><br /> <style scoped="" type="text/css"> #comments {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;resize:none;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{float:left;background:#3182d9;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#3a3a3a;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} .post-body input {width:initial;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>

</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

Cara Memasang :

1. Klik Rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save 

Note :

Ganti kode warna merah dengan kode buku tamu/GuestBook/Chatbox milik sobat. Jika sobat belum punya buku tamu silahkan buat daftar terlebih dahulu di chatbox ( seperti winget chatbox sebelah kanan blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.