Thursday, August 17, 2017
728x90 V3

How To Add a Floating Sticky Footer Bar in Blogger

On the web you can find a bunch of plugins that manually add Floating Footer Bars, but those plugins can cause problems in your code. So spend a couple of minutes and make your own floating footer bar, in this tutorial i will show you step by step how to do that! Everything inside this code you can edit like you want ( pictures, links, text ). Code is fully optimized and it won’t slow down your site/blog.
Floating bar contains a search box,a link for feed subscription, links for Twitter, Facebook like and follow buttons and translator in five languages. Pictures inside my default floating bar are in low quality so i recommend you to change them.

Capture

 

You can see the live preview on this demo blog.

Edit HTML

First you need to go to your Blogger Dashboard and go to Template and click Edit HTML like in the picture below.

tut 1

 

Find  ]]></b:skin> and paste code

Now when you’re in the HTML document of the site just click anywhere in the document and hit CTRL+F, in the search box type tag

]]></b:skin>

and hit ENTER. Now right above this code put the code from below:

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

Find </head> and paste second code

Now in the search box enter </head> then hit ENTER

</head>

Now just above </head> code put the code from below:

<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>

Find </body> and paste third code

Now search for the </body> code

</body>

Right above this code enter the code from below:

<div id=’custom-toolbar’>
<img border=’0′ class=’close-toolbar’ onClick=’closeTopAds();return false;’ src=’http://1.bp.blogspot.com/-eGh5FWRNbHo/Uvf_Q2nYXLI/AAAAAAAAGDs/8Q2pMCs2OsU/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 == &quot;&quot;) this.value = &quot;Search here…&quot;;’ onfocus=’if (this.value == &quot;Search here…&quot;) this.value = &quot;&quot;;’ 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=’http://4.bp.blogspot.com/-qF-13gWPCho/Uvftq1v5ApI/AAAAAAAAGCo/hoFWKPCSUro/s1600/facebook-icon.png‘/></a></td>

<td><a href=’http://twitter.com/username‘ title=’Follow on Twitter’><img src=’http://4.bp.blogspot.com/-OSxpeBNLK4A/UvfuiIkU5RI/AAAAAAAAGC4/Cq4TdM5fmhs/s1600/twitter-icon.png‘/></a></td>

<td><a expr:href=’data:blog.homepageUrl + &quot;feeds/posts/default&quot;’ title=’Subscribe to Feed’><img src=’http://1.bp.blogspot.com/-wRI1rmbhV0M/Uvfvq5ZBMjI/AAAAAAAAGDU/6BSlAgac3sw/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(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cen&amp;hl=en&amp;ie=UTF8&quot;); return false;’ rel=’nofollow’ title=’English’><img align=’absbottom’ alt=’English’ border=’0′ height=’24’ src=’http://1.bp.blogspot.com/-sXhoGx5s2dg/T5xOeRCOuYI/AAAAAAAAARo/ldYJIGQldwQ/s1600/United+Kingdom(Great+Britain).png‘ width=’24’/></a></td>

<td><a class=”google_translate” href=’Javascript:void(0)’ onclick=”window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cde&amp;hl=en&amp;ie=UTF8&quot;); return false;”><img alt=”German” border=”0″ align=”absbottom” title=”German” height=”24″ src=”http://1.bp.blogspot.com/-nX0ktPsJQTA/T5xOMiiOGQI/AAAAAAAAARY/VXhAPARvh9E/s1600/Germany.png” width=”24″/></a></td>

<td><a class=”google_translate” href=’Javascript:void(0)’ onclick=’window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cfr&amp;hl=en&amp;ie=UTF8&quot;); return false;’ rel=’nofollow’ title=’French’><img align=’absbottom’ alt=’French’ border=’0′ height=’24’ src=’http://2.bp.blogspot.com/-aklFaq6pPeQ/T5xOV1mPbcI/AAAAAAAAARg/CcBmt1ptN88/s1600/France.png‘ width=’24’/></a></td>

<td><a class=”google_translate” href=’Javascript:void(0)’ onclick=’window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Car&amp;hl=en&amp;ie=UTF8&quot;); return false;’ rel=’nofollow’ title=’Arabic’><img align=’absbottom’ alt=’Arabic’ border=’0′ height=’24’ src=’http://3.bp.blogspot.com/-cx9e66I48yM/T5xM9L7uzoI/AAAAAAAAAQY/ftpOVX9YZEE/s1600/Saudi+Arabia.png‘ width=’24’/></a></td>

<td><a class=”google_translate” href=’Javascript:void(0)’ onclick=’window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Czh-cn&amp;hl=en&amp;ie=UTF8&quot;); return false;’ rel=’nofollow’ title=’Chinese Simplified’><img align=’absbottom’ alt=’Chinese Simplified’ border=’0′ height=’24’ src=’http://1.bp.blogspot.com/-eXup49w042c/T5xMxliSlmI/AAAAAAAAAQQ/v9efq8I4TI0/s1600/China.png‘ width=’24’/></a></td>

</tr>
</table>
</div>

Customize

Blue text – Change this text with the links of your social media profiles, facebook and twitter. Just make sure that the links are close with ‘ and ‘ example. ‘ my facebook link ‘ .

Green text – those images you can change like however you want, imgur, or other upload sources are available and feel free to edit them, just let dimensions stay the same!

If you want to add more items like counter links and something like that just before closing </tr> line add line like below:

<td>Add here what you want</td>

 

I hope that this tutorial helped you, i wish you a lot of success and traffic! 😉

About Dimitrije Zivadinovic (Di)

Dimitrije Zivadinovic (Di)
Hey there, I'm Dimitrije Zivadinovic and this is my blog! I am a blogger, and.. No i am just a blogger, i know something about blogging platforms and i wanted to share my knowledge with you. If you have anything to ask me, feel free to hit me up via social media or leave a comment down bellow!

Check Also

Add a CSS Animated Share Button on Blogger

Social Medias are very important for SEO so it’s better for you to have a ...

Leave a Reply

Your email address will not be published. Required fields are marked *