I have seen that many of those using toolbars such as Wibiya have had to remove it because of interfering with the performance of some scripts like Scriptaculous and Prototype, while others have chosen to remove these scripts just to continue using the toolbar.

Well, for those who prefer to have a custom toolbar that does not give them such problems and allow them to continue using other scripts, here’s how to create our own floating toolbar with a close option. The toolbar contains a search box, link for feed subscription, link to follow on Twitter and Facebook, like button to share on Twitter or Facebook and translator in five languages.

Floating Foter Bar

Adding a Custom Sticky Toolbar on Blogger

Step 1. Login to your Blogger account > select your blog > click on the Template option on the left side

Step 2. Click on the Edit HTMl button on the right side > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box

Step 3. Paste or type the following code inside the search box and hit Enter to find it:

]]>

Step 4. Just above ]]> add the following CSS style:

#custom-toolbar {
overflow: auto;
position: fixed;
background: #1B1B1B url(“http://1.bp.blogspot.com/-0XYBiDXh7Vo/Uupp-CQrhJI/AAAAAAAAF_8/qKBKfmooBVQ/s1600/pagelist.png”) repeat-x scroll 0 bottom;
font: bold 13px/17px “Helvetica Neue”,Helvetica,Arial,Geneva,sans-serif;
height: 33px;
margin: 0 auto;
width: 100%;
bottom:0px;
right:0;
}
.close-toolbar {
float: right;
margin-top:6px;
padding-right: 10px;
cursor: pointer;
}
.search-text {
color: #D1D1D1;
text-align: center;
border-radius: 10px;
}

.google_translate:hover img {
filter:alpha(opacity=0.90);
-moz-opacity: 0.90;
opacity: 0.90;
border:0;
}

Step 5. Now search for this tag:

Step 6. Just above the tag add this script:

// Custom Toolbar for Blogger (helplogger.blogspot.com)
//<![CDATA[
var toolbar_blogger = new Array();
var toolbar_clear = new Array();
function toolbarFloat(toolb) {
toolbar_blogger[toolbar_blogger.length] = this;
var ftrpointer = eval(toolbar_blogger.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!=”BackCompat”) ? document.documentElement : document.body;
this.toolbsrc = document.all? document.all[toolb] : document.getElementById(toolb);
this.toolbsrc.height = this.toolbsrc.offsetHeight;
this.toolbheight = this.cmode.clientHeight;
this.toolboffset = toolbGetOffsetY(toolbar_blogger[toolbpointer]);
var toolbbar = ‘toolbar_clear[‘+toolbpointer+’] = setInterval(“toolbarFloatInit(toolbar_blogger[‘+toolbpointer+’])”,1);’;
toolbbar = toolbbar;
eval(toolbbar);
}

function toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
while ( parentOffset != null ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return toolbTotOffset;
}
function toolbarFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop – toolb.mtaoffset + “px”;
}
function closeTopAds() {
document.getElementById(“custom-toolbar”).style.visibility = “hidden”;
}
//]]>

Step 7. Now search for the tag and just above it, add this HTML code:

 

<a href='http://www.facebook.com/username‘ title=’Follow on Facebook’> <a href='http://twitter.com/username‘ title=’Follow on Twitter’> Share English German French Arabic Chinese Simplified

Finally, change what is in blue with the URLs of your Facebook and Twitter profiles.
If you want to add more items, such as a counter, links, etc.. add a line like this just before the

tag:

Add here the extra content

Add the content where is indicated and that’s it.

As you can see, it is not necessary to depend on external sites to have a toolbar, from now on you can have a customized toolbar on your Blogger blog.

Advertisements