adf.ly - shorten links and earn money!

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/AVvXsEiWxC1Jr1D-R5f6bMPDRIenIYev0GYEJhGXvxIojUAvdhQGzAEVz30J8KDoHpfQ2o9mKAEGZwe3dm69nx2HFI0hMimEA4Wc3P4lRdLy_Cjgm2FYxZkEXNlpkiaNqFyO9vgWTne9OgZm4uY/') 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/AVvXsEiWxC1Jr1D-R5f6bMPDRIenIYev0GYEJhGXvxIojUAvdhQGzAEVz30J8KDoHpfQ2o9mKAEGZwe3dm69nx2HFI0hMimEA4Wc3P4lRdLy_Cjgm2FYxZkEXNlpkiaNqFyO9vgWTne9OgZm4uY/ = 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

28 comments:

  1. mencuba ni...tapi blum berjaya..hahaha

    ReplyDelete
  2. @Dev Clarehova
    ehehe..buli wa tu..pastekan jak kod tu..pastu masukkan kod shoutbox. Siap! :a

    ReplyDelete
  3. saya curi style shoutbox wsb..hehehe... :P

    ReplyDelete
  4. lawa shoutbox ni..
    tapi yang saya amek semalam kat sini lagi stail!
    thanks!

    ReplyDelete
  5. @Arya Putra
    ok gak kan arya..klu ada apa², kita kongsikan sma² k..:a

    ReplyDelete
  6. shoutbox saya dye tanak masuk ke dalam :f

    ReplyDelete
  7. @thelittlesadgirl ' story
    eh..xnak msuk ke dalam ? apasal camtu? awk ada ubah² kod tu ka? aku tgk kod tu dlu ya...aku update jap..

    ReplyDelete
  8. yang saya pun die x nak masuk dalam jugak.camne bro? :f

    ReplyDelete
  9. @Hisyam Nozi
    haih? aku gune kod y sma gak..ok..aku fix jap k..:a

    ReplyDelete
  10. @Hisyam Nozi
    bro..kod updated..klu ada mslh lg..infom k..:a

    ReplyDelete
  11. macam mane niyh ? :f buat kan laa . :o boleh kan ? :s

    ReplyDelete
  12. huwaa! xmw jd. shoutbox ada tp x dok tat tpii~ :b :b :b

    ReplyDelete
  13. http://www.gozhromania.webs.com

    ReplyDelete
  14. nape ta bole pown ?
    da cube byk kali tpi ta jdi gak..

    ReplyDelete
  15. @Mysara Muci-Muci
    Aku dah update kod tu. Macam kod shoutbox HH ni.

    Selamat mencuba. :)

    ReplyDelete
  16. aloo geng2..
    sya pn cuba tpi sya punya shout box tdk kena hide pn?
    nda pa..cuba lg ni :)

    ReplyDelete

Drop your comment. Ask or suggestion.

Join us on Faceboook Page too.