Membuat Guest Book Lebih Menarik

Membuat Guest Book Lebih Menarik

Diposting oleh adie firmansyah ✪ No comment yet

Saya akan menjelaskan CARA MEMBUAT BUKU TAMU MELAYANG DENGAN JAVA SCRIPT EFFECT . Dengan versi ini buku tamu akan terlihat effect Show on saat tombol di klik . Langsung aja deh caranya.

Pilih Rancangan
Pilih ELEMEN halaman
Klik Tambah Gadget lalu pilih HTML/Java script
Simpan kode berikut ini didalamnya

Codenya:

<style type="text/css">
    #at{
    position:fixed;
    right:450px;
    z-index:+1000;
    }
    * html #at{position:relative;}
    .attab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url(URL);
    }
    .atcontent{
    float:left;
    border:2px solid #7FFF00;
    background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    padding:10px;
    }
    .atcontent:hover{
    border:2px solid #fff;
    background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
    }
    </style>
    <script type="text/javascript">
    function showHideAT(){
    var at = document.getElementById("at");
    var w = at.offsetWidth;
    at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
    at.opened = !at.opened;
    }
    function moveAT(x0, xf){
    var at = document.getElementById("at");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    at.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="at" style="top: -1px; ">
    <div class="attab" onclick="showHideAT()"> </div>
    <div class="atcontent">
    <div align="center">
    <div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

paste script c box kamu di sini


    </div>
    </div>

    <br>
    <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close Cbox"></a></div>
    <div align="left"><font size="2"><a href="http://www.uttafreak-987.co.cc/2011/04/cara-membuat-buku-tamu-blog-showhide-di.html" target="_blank&quot;"><div style="color: #444444;">
    <span style="font-size: xx-small;">By infoogue.blogspot.com</span></div></a></font></div>
    </div></div>

    <center><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://lh5.ggpht.com/_yF0--u7KSSI/TKAS0Ee4NLI/AAAAAAAAAq0/HLbB4jGuFxk/GuestBook.png" alt="cbox" title="Click here to open Guest Book"></a></center>

    <script type="text/javascript">
    var at = document.getElementById("at");
    at.style.top = (-200-at.offsetWidth).toString() + "px";
    </script>

Catatan :

1. Yang berwarna MERAH anda bisa menggantinya dengan CODE C BOX kamu 
2. Yang berwarna BIRU anda bisa menggantinya dengan gambar yang lain

COPY SCRIPT DI BAWAH INI

<style type="text/css"> #at{ position:fixed; right:450px; z-index:+1000; } * html #at{position:relative;} .attab{ height:100px; width:30px; float:left; cursor:pointer; background:url(URL); } .atcontent{ float:left; border:2px solid #7FFF00; background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; padding:10px; } .atcontent:hover{ border:2px solid #fff; background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at" style="top: -1px; "> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;"> paste script c box kamu di sini </div> </div> <br> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close Cbox"></a></div> <div align="left"><font size="2"><a href="http://www.uttafreak-987.co.cc/2011/04/cara-membuat-buku-tamu-blog-showhide-di.html" target="_blank""><div style="color: #444444;"> <span style="font-size: xx-small;">By infoogue.blogspot.com</span></div></a></font></div> </div></div> <center><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://lh5.ggpht.com/_yF0--u7KSSI/TKAS0Ee4NLI/AAAAAAAAAq0/HLbB4jGuFxk/GuestBook.png" alt="cbox" title="Click here to open Guest Book"></a></center> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script>

THANKS YOUR VISIT MY BLOG ^_^