How to add a Floating Sticky Footer Bar in Blogger

I have seen that a significant number of those utilizing toolbars, for example, Wibiya have needed to remove it because of interfering with the execution of a few scripts like Scriptaculous and Prototype, while others have decided to remove these scripts just to continue utilizing the toolbar.

All things considered, for those who want to have a custom toolbar that does not give them such issues and permit them to keep utilizing different scripts, here how to make our own floating toolbar with a close option.

Adding a custom Sticky Toolbar on Blogger

Step # 1: Login to your accoutn and go to Template > Edit HTML

Step # 2: Now, click inside the code area and Click CTRL + F key and open search box

Step # 3: copy the following code and paste in the search box and find it.

]]></b:skin>

Step # 4: Now above ]]></b:skin> add the following code

#custom-toolbar {
overflow: auto;
position: fixed;
background: #1B1B1B url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kcl7RrM2LQaAV-5Fyf3xdue9Z0ZkB8NTHEhCspCty5QYP06wNjlDI9Vh04-iU4b35yKlamnllGT1kK1TlQDt26s2oKVq2Z8bsHd8-DWV9SAr42_bEiGq4WfMGwzzpV_vZBcjZEPDt9M4/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 find out this tag

</head>

Step # 6: Now above the </head> tag add this code

<script type='text/javascript'>
// 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";
}
//]]>
</script>

Step # 7: Now find out for the </body> tag and just above it, add this HTML code

<div id='custom-toolbar'>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxO94YlhQ9QJzEXznfNN_N4wawTVPKsCgXRc5Ij58Hl2zes9I87DTO_YHhee5_8cIu48EllMiYMnR_OLl9mVrmbA9jULWwzFjvmn-XVVfBXpL4LfarsJg5yMdGwEhtGHDhPyLlH2iqvJXi/s1600/close_button.png' title='Close' width='17'/>
<table border='0' cellpadding='2'>
<tr>
<td style='padding-left:30px; padding-right:50px;'><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input class='search-text' name='q' onblur='if (this.value == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form></td>
<td style='padding-left:20px;'><a href='http://www.facebook.com/username' title='Follow on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkvAMqJ2i9ljQpNolFvyR7hu2fjpBDk0V_lXxzxM1lK1XFEH0peaBpAOeKL6sw_71B296_EF-JCXFHl-scne8NS_fbndTEAJilogjlXEXuy9X-umwH7XnGjATB9M4LKknOKC1lrbx4cwJ/s1600/facebook-icon.png'/></a></td>
<td><a href='http://twitter.com/username' title='Follow on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvnI4qHxM5P8VuCxed3RhmYKz2HSE8E4K1BLb2lZRgbHGOchMmCIL2kO4akuo1Siyrbbn1UPo5mKVkorhRKSisU0_3RW2LkPR1DKiJzK_d_yPlKbz_CEmKDZ9tctmxUzG8hx2QwUimkpgC/s1600/twitter-icon.png'/></a></td>
<td><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKp9gmM89TGkex5ymXKVqhXRYE1RmIOkzriS6EVL5nlQmrl7SICa9Z-JmWqgLRhnWkG17fYhOWWmEwcvBFK-91Rtdrnsz2TdsFFdpr6yqhS3dr2BNdALEauJr0QJunvWZu1aL9UDgkkF2/s1600/rss-feed-icon2.png'/></a></td>
<td style='padding-left:40px; padding-top: 5px;'><a class='twitter-share-button' data-count='horizontal' data-lang='en' href='http://twitter.com/share' title='Publish on Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><a href='http://www.facebook.com/sharer.php' name='fb_share' title='Publish on Facebook' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
<td style='padding-left:60px;'><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cen&hl=en&ie=UTF8"); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-BJQd8o7s9OhUkmAzFHhEQQS6aHFEiDhtel5Eq9kiG_IZxuCZRUiFFknre_yrCAw4nv2kLq4PPob_kagNg3aWCVU16HX2cKiOpG0uUdNaAo4qymjnndiC2g-JV8u77YifXBvw72E1_VFJ/s1600/United+Kingdom(Great+Britain).png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick="window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cde&hl=en&ie=UTF8"); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0PUpTLchVFLpqz_ZgrTYGbfuTrpTSJ1xBoPOvrCdYdB3f8N-QmRWahIBgMygRXJw3HfM-L-VcdINuzIYiFsRF2jBQ8314t2c0rz7BlCxrWxv9vMch9W5onudCI6ejzTEuinq1qLvRyaWO/s1600/Germany.png" width="24"/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cfr&hl=en&ie=UTF8"); return false;' rel='nofollow' title='French'><img align='absbottom' alt='French' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Y_xqPKmOJaKXX9j3n03N8GpJjxSqnvTcrrsKZ7k6tWwmiHyV9iqltHeAr26oPC8H_ihtHx-Ym8vy958aQ71S79mgcxKpE5EWVJAXSYx_yY75Fr2oXVpwqtIqRokL5D4ZSfnqYsU_o_oY/s1600/France.png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Car&hl=en&ie=UTF8"); return false;' rel='nofollow' title='Arabic'><img align='absbottom' alt='Arabic' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHEdCn8fpfGts-A6B8buRTgTDoQDWuEH-XVZ7iwJGKRFFt45b_xJv7EqMDYF4RN7h8C9zp5f6-tRcp1xGml7P5eLUlpE9_V2O9AuOu77Sz5G5nw0K43HoTlg-NIbEPgQAM__8NwNotoAOV/s1600/Saudi+Arabia.png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Czh-cn&hl=en&ie=UTF8"); return false;' rel='nofollow' title='Chinese Simplified'><img align='absbottom' alt='Chinese Simplified' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1rQA2Aukt4qfER_ikdU0urCws0pZ3ri6HNBTkJobRQ1oiuSR2R4Io9iojyFxirG0pAYdik7BgwM8m07daRGyH3Es8XwONKERm0chsTJQGcqrwXhMn4O8qsszzC5M22uh5RPpZZ-Ny2vUL/s1600/China.png' width='24'/></a></td>
</tr>
</table>
</div>

Step #8: Change Bule URLs with your Facebook and Twitter profiles URLs

If you need to include more things, for example, a counter, links, and so... add a line like this before the </tr> tag

<td>Add here the extra content</td>

Add the content where is indicated

Done!

Pages

Axact Blogger Template

How to add a Floating Sticky Footer Bar in Blogger

Adding a custom Sticky Toolbar on Blogger

Share To:

Leave A Comment:

0 comments:

Recent

Popular Posts

Recent Comments

Pages

How to add a Floating Sticky Footer Bar in Blogger

Adding a custom Sticky Toolbar on Blogger

Share To:

Next

Newer Post

Previous

Older Post

Leave A Comment:

0 comments: