18/12/2011

Hidden Guestbook Blog Widget

This is a guestbook widget that hide as a tab at right upper corner in the site. Here are some pict for you to choose . You can put shoutbox, shoutmix or any other chat based interactive or even follower widget in it. To put the picture right click on the pict bellow and choose COPY IMAGE LOCATION and replace the HTML/Java bellow find the PUT YOUR PICTURE HERE


Instructions to add html/java script you can click http://freewidget4u.blogspot.com/search/label/.Installing%20Widget

=== Start Copy HTML/Javascript After this Line ===

    <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('http://PUT YOUR PICTURE HERE') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #666666;
    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">

    <!---shoutbox Code Here--->


    <!---shoutbox Code Here--->
 
    <a href="http://freewidget4u.blogspot.com/2011/12/hidden-guestbook-blog-widget.html" target="_blank"><span style="font-size: xx-small;">grabTHIS!</span></a>
    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [close]
    </a>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

=== End Copy Before this Line ===

find the red code and put the HTML/Javascript like shoutmix or shoutbox between it.
    <!---shoutbox Code Here--->

    Example paste the Shoutmix / shoutbox code

    <!---shoutbox Code Here--->

No comments:

Post a Comment

Related Post