This tutorial is for blogger who want to autohide their shoutbox.
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZmZhP8wf-QlN8bhC8wi3ah-vUvhWe15ockBkxFKqkzCbwt-fN5FZiLkTm7IbeB-QeVjX6Khc26wWXSMxaFJYUFKh60VJRv0Ath30i-VjasVgH1DyV94vk-BNSv1965VQoSojvuKbALoT-/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
nice tutorial
thanks!
xphm camne nk paste shoutnye code tuh? kat mane nk paste~
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!
ouh yeah sudaa boleyy . c0ol ! ahha . :D
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 :)
macam mana kalo gambar pada asalnya okey cun...after tekan...gambar tu ikut sembunyi sekali? ; )
thanks for sharing :)
wahhh thanx a LOT!!!!
knape bile ltak code nii,die first2 ade kat tgh tp ble da tkan kat bnde hijau tuu bru die hide??
Trainer Fariz : mungkin width kena adjust dulu
aibeast : macam mana maksud kamu? cuba bagi link blog.
TUMPANG TANYA :)
kalau nak tukar gambar "shout" tu mcm mana?
tukar URL yang kaler biru tu :)
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
caner nk dpt code tu??
Post a Comment