| 14 comments ]

This tutorial is for blogger who want to autohide their shoutbox.

http://img541.imageshack.us/img541/3804/48046885.jpg 

Follow this simple steps.

 
01. Login to blogger
02. Go to Design > Layout > Page Element > Add Gadget
03. Choose HTML/Javascripts
04. Add code below
<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://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') 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">
PASTE YOUR SHOUTBOX CODE HERE

<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>
05. 50px can be change to any value. Higher value will cause lower position of shoutbox.
06. Save and you are done..

Drop your feedback ok :)

14 comments

nurdani said... @ September 23, 2010 at 12:02 PM

nice tutorial
thanks!

Aie Kakashi said... @ February 17, 2011 at 11:10 PM

xphm camne nk paste shoutnye code tuh? kat mane nk paste~

Al said... @ February 22, 2011 at 12:57 AM

I want to change the shoutbox image. How can I make the image fully visible before i even click it? Mine now currently showed only half- approximately the size of the original shoutbox(the green one) image. :) Oh btw, nice widget!

eyra ~ said... @ February 22, 2011 at 10:34 AM

ouh yeah sudaa boleyy . c0ol ! ahha . :D

admin said... @ February 22, 2011 at 7:52 PM

Al. what u mean is that ur cat icon is now become half isnt it??

.gbtab{
height:100px;
width:30px;
float:left;

code above, u might need to change the width.. try first and let me know ok :)

Trainer Fariz said... @ March 23, 2011 at 7:50 PM

macam mana kalo gambar pada asalnya okey cun...after tekan...gambar tu ikut sembunyi sekali? ; )

ijaapdot said... @ June 19, 2011 at 12:59 PM

thanks for sharing :)

aibeast said... @ July 4, 2011 at 10:35 AM

wahhh thanx a LOT!!!!

aibeast said... @ July 4, 2011 at 11:21 AM

knape bile ltak code nii,die first2 ade kat tgh tp ble da tkan kat bnde hijau tuu bru die hide??

admin said... @ July 4, 2011 at 10:32 PM

Trainer Fariz : mungkin width kena adjust dulu
aibeast : macam mana maksud kamu? cuba bagi link blog.

Nur Aisyah Imran said... @ July 28, 2011 at 6:40 PM

TUMPANG TANYA :)

kalau nak tukar gambar "shout" tu mcm mana?

admin said... @ July 28, 2011 at 8:10 PM

tukar URL yang kaler biru tu :)

Anonymous said... @ December 12, 2012 at 4:06 AM

Howdy! I know this is kind of off topic but I was wondering
if you knew where I could get a captcha plugin for my comment form?
I'm using the same blog platform as yours and I'm having difficulty
finding one? Thanks a lot!
Here is my site File Management

Naseha Aika said... @ October 16, 2013 at 2:55 PM

caner nk dpt code tu??

Post a Comment

Related Posts with Thumbnails