Cara Membuat Widget Buku Tamu Di blog

1. 

Hai sobat blogger !., kali ini saya mencoba untuk memposting satu artikel ringan nih sob, alias tidak memakan waktu banyak untuk menyelesaikannya. Kali ini saya akan membahas tentang topik Cara membuat widget Buku tamu Auto hide . widget ini berfungsi untuk mengetahui siapa yang berkunjung di blog sobat. Jadi kita bisa langsung merespon dan membalas komentar itu. Caranya :

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Tata Letak > Tambahkan Gadget > Html/Javascript
4.) Masukkan kode dibawah ini didalam kolom konten kosong yang tersedia

     BUKU TAMU

<style type="text/css">

    #gb{

    position:fixed;

    top:50px;

    z-index:+1000;

    }

    * html #gb{position:relative;}

    .gbtab{

    height:100px;

    width:30px;

    float:left;

    cursor:pointer;

    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4BRkA2VdtQe1if3sTyYiDV7jsQEzJlJ-ed8YNTPNlf__Hs0lB-Xm2wb8KV0N8PZw8-o0buyPAbVRR6D0gvGWBxDnl4U94c64qPlwLPP42NZjkhfTkhNCrrDVXwAvGlqEN8U4YKplEK4kA/') no-repeat;

    }

    .gbcontent{

    float:left;

    border:2px solid #A5BD51;

    background:#F5F5F5;

    padding:10px;

    }

    </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">

Buku Tamu Tari

   <form method="post" action="#">

    <table>

     <tr>

      <td>Name</td>

      <td><input type="text" name="Name" size="30px" maxlength="20"/></td>

     </tr>

     <tr>

      <td>Address</td>

      <td><input type="text" name="Address" size="30px" maxlength="20"/></td>

     </tr>

     <tr>

      <td>Email</td>

      <td><input type="text" name="email" size="30px"/></td>

     </tr>

     <tr>

       <td>Gender</td>

       <td><input type="radio" value="M" name="Gender" />Man

         <input type="radio" value="W" name="Gender" />Woman

         <input type="radio" value="O" name="Gender" />Other

       </td>

     </tr>

     <tr>

       <td valign="top">Fafourite Program</td>

       <td><input type="checkbox" value="Sport" name="acara" />Sport

         <input type="checkbox" value="Learn" name="acara" />Learn

         <input type="checkbox" value="Traveling" name="acara" />Traveling

         <input type="checkbox" value="Other" name="acara" />Other

       </td>

     </tr>

        <td valign="top">massage</td>

        <td><textarea cols="40" rows="5" name"Massage"></textarea></td>

     <tr>

     </tr>

     <tr>

        <td valign="top">Impression</td>

        <td><textarea cols="40" rows="5" name"Impression"></textarea></td>

     </tr>

     <tr><td colspan="2"><input type="submit" name="submit" value="Kirim" />

          <input type="reset" name="reset" value="Batal" />

        </td>

     </tr>

    </table>

   </form>

 

    </div>

    <script type="text/javascript">

    var gb = document.getElementById("gb");

    gb.style.right = (30-gb.offsetWidth).toString() + "px";

    </script></div>

http://ikepolsa.blogspot.com/