Home Blogging How To Add a Floating Sticky Footer Bar in Blogger Blog

How To Add a Floating Sticky Footer Bar in Blogger Blog

0
SHARE
Floating Sticky Footer Bar was a very good and popular widget to adding your social contents in the footer. When your visitors comes to your blog, they will see this awesome and good looking sticky floating footer bar and subscribe, like ,follow you on your social accounts. So in this article, I show you how to add a floating sticky footer bar into your blogger blogs easily. 
How To Add a Floating Sticky Footer Bar in Blogger Blog
Floating footer bar on any blog getting the attention of your visitors to those contents which you’ve added in the footer bar. When any one drop down the whole page, it will automatically floating in and floating out. Generally social icons buttons, or back to top button or search box or any other featured articles show in this bar.

Why You Use The Sticky Footer Bar into Your Blog ?

If you want to turn your visitors attention to your specific posts / articles , then it will help you a lot, because it will always see to your readers, and at last they will click on it to check the post. It will getting more views as compared to any other place.

In the sidebar or any other place if you add your contents, it will only getting the attention when it will see your readers, but using this sticky bar , your readers always see your contents, or social icons or search box, while they will scrolling your page.

Where This Awesome Sticky Bar Display ?

Basically this is designed to display in the footer place into your blogs. Because in the sidebar, there are also many other widgets you’ve already added many times. In the footer, you can easily add your social icons buttons, back to top button, any featured article, search box, or language translator to translate your contents , or any other widget.

How To Create Sticky Footer Bar In Blogger Blog

Step 1 – First of all write into your browser search bar www.blogger.com and go to this site.

How To Add a Floating Sticky Footer Bar in Blogger Blog

Step 2 – Sign In to your blogger dashboard and then go to “Template” and then “Edit HTML” .

How To Add a Floating Sticky Footer Bar in Blogger Blog
Step 3 – Click anywhere in the code and type CNTRL + F to find below tag. 
How To Add a Floating Sticky Footer Bar in Blogger Blog

Step 4 – Now copy below code and paste in the search bar and hit enter button.


]]></b:skin>

Step 5 – Copy below the CSS code and paste just above ]]></b:skin> tag.

#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 6 – After this, copy below code and find this tag.

</head>

Step 7 – Copy the below Script and paste just above the </head> tag. 

<script type=’text/javascript’>
// Custom Toolbar for Blogger (www.bloggerhope.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 8 – Now find this tag.

</body>

Step 9 – Copy the below code and paste just above this </body> tag. 

<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%7
Cen&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/s160
0/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=’Arabi
c’ 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;langp
air=auto%7Czh-cn&amp;hl=en&amp;ie=UTF8&quot;); return false;’ r
el=’nofollow’ title=’Chinese Simplified’><img align=’absbottom’ alt=’C
hinese Simplified’ border=’0′ height=’24’ src=’http://1.bp.blogspot.com/-eXup49w042c/T5xMxliSlmI/AAAAAAAAAQQ/v9efq8I4TI0/s1600/Ch
ina.png’ width=’24’/></a></td>
</tr>
</table>
</div>

Simply find the RED color text, and change with your Facebook URL and Twitter Username. You’ve done all the work. If you find any error or any suggestion then share your comments in the given box below. Thanks ! ! !