Ads

Creating Floating Shoutbox

Perhaps many of you new bloggers who are still confused about how to Create Floating Shoutbox follows I will show you how to no longer confused about how to create floating shoutbox. Get to the subject, the steps in making Shoutbox drift is as follows:

1. Login to Blogger.com.
2. From Dashboard Page click menu Design and click Edit Html menu.
3. Further search code </head>, if you have found, place the following code just below the code </head>


<style type='text/css'>
#gb{
position:fixed;
top:50px;
/* position of the button layout to change according to your wishes */
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh6.ggpht.com/_pThhtmWVZ88/S64CahqtgEI/AAAAAAAAA2o/WGVlprYGc3Q/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #cccccc;
background:#eeeeee;
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:center;'><a href='javascript:showHideGB()' title='Close'/>
</div>

Put your script Shoutbox 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>
</div>



Description:
top: 50 px;
is location of button can Shoutbox above and below please your creation own according to your liking.

4. Click the button Image and if it is in accordance with the wishes click Save Template.


Done and good luck!