ACTUALLY The menu bar doesn’t fit to be called menu navigation. The English is “Floating Sticky Footer Bar”, at least according to Help Blogger who shares design tips to beautify this blog.

Static Menu Bar Navigation in Blog FooterYou can see an example or a demo at CB Blogger Lab. See the bottom, Footer section. I think it can also be installed on top of the blog, as in tips Creating a Toolbar Above the Blog Header.

This static footer bar, in addition to beautifying the blog, also adds a navigation menu and other elements that we want to highlight on the front page. The advantage is that the static footer menu bar can be removed by the user if they feel disturbed, with just one click.

How to Create a Static Menu Bar Navigation in the Footer (Sticky Footer Bar)

1. As usual, start by clicking “Template” > “Edit HTML”.
2. Copy & paste the following code above the code ]]>

#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;}

3. Copy & paste the following code above the code

// Custom Toolbar for Blogger (helplogger.blogspot.com)
//
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 toolbar=”toolbar_clear[“+toolbpointer+’] = setInterval(“toolbarFloatInit(toolbar_blogger[‘+toolbpointer+’])”,1);’;
toolbar = toolbar;
eval(toolbar);
}

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”;
}
//]]>

4. Finally, Copy & paste the following code above the code

http://facebook.com/cbblogger” title=”Follow on Facebook”>

http://twitter.com/exampleblog” target=”_blank” title=”Follow on Twitter”>

http://feeds.feedburner.com/examplesblognih” target=”_blank” title=”Subscribe to Feed”>

.