How To Hide Shoutbox in Blogger

Shoutbox is a very useful widget for bloggers to communicate more easily. It also important widget for blogger to pay back a visit to the visitor's blog. But do you wanna hide your shoutbox  widget? You can do it by following this tutorial. You also can add another style of shoutbox appear, How To Make Floating and Click To Appear Shoutbox.

* Updated code : 9th september 2011 *

1. Go to your Dashboard >> Design >> Page Element >> Add a Gadget.

 

2. Paste this code below in it :

<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/AVvXsEgiFtz4c2jIdCKIVhoN5TM2Vzn4saU-OBANhZq4b7du8zlUZ7BaGnNpuOzOol9QLpJiHUVYcS9Zt9NQTsMgXbPtRe3dWFVaApJHmbdnPHxkUVMJDX5HnUWHTuR4MyHN6G39cSXYrwix5Xc/') 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">
<div style='text-align:left; '>
<p>

<a alt="HOW-TO HOUSE" style="text-decoration:none" href="http://adf.ly/GRc0" target="_blank">[?]Add this shoutbox style</a>

</p>
<div/>

PASTE YOUR SHOUTBOX CODE HERE

    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [close]
    </a>
    </div>
    </iframe>
</div></div></div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString()   "px";
    </script>

Customization

50px = Change to any value. Higher value, lower position of shoutbox.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFtz4c2jIdCKIVhoN5TM2Vzn4saU-OBANhZq4b7du8zlUZ7BaGnNpuOzOol9QLpJiHUVYcS9Zt9NQTsMgXbPtRe3dWFVaApJHmbdnPHxkUVMJDX5HnUWHTuR4MyHN6G39cSXYrwix5Xc/ = You can change with your own shoutbox icon.

#666666 = Shoutbox border color.
 
#F5F5F5 = Shoutbox background color.

PASTE YOUR SHOUTBOX CODE HERE = Replace with your Shoutbox code.

3. Save & DONE! 

Now, your shoutbox will be hidden at the left side of your blog.  ENJOY! 


Requested by Chriz George