Floating sticky bar for footer (WFE)

Posted by Tung Thanh Ly Vietnam on Thursday, November 13, 2014 with No comments
Step 1 - 3 
 ]]></b:skin>
Step 4. Just above ]]></b:skin> add the following CSS style:
 #custom-toolbar {
overflow: auto;
position: fixed;
background: #1B1B1B url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKmDhD_Vos03H3Awok-2tRXLPar7bqpK9xYESMnfrQkTVBJHvpncR9LduNbqLbtLGJfal13XMrugbIN16DBRDOqYth0BgbAZPd_2hSIqqRi0xB6gjybRBDV4XEbJT73YC1UJOjiS7ajwcb/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:
 </head>
Step 6. Just above the </head> tag add this script:
 <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 search 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/AVvXsEhXGiwy8OykI4bUvBZ85v5_rBuZ6KeQxSESnTcUVkjFv7hyFOYBeFyDIW95xNPIMZqDs-iRMcNjSn9eFkcVsviJi7Zf1r205eIOlZasuzcRIMelnew2aijFe-qL2DYwbdq7rFqjmHxUr8wC/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArPkDk68fRy-t3is-ZN5XHomixujYCRY1Ezw6nwawz9f_JTiZYz1MUwH2TdOziEIIi60gvEhylIPovKIj_3BH6xvq9y0n3cGogKoXayo7Rkcgb2T7nWwXcYdkmnIu2e6cifqgavilwojY/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/AVvXsEjUDOkNae61-VGU4NMA7glXK7inaEuFHzP-WPrsk6XQlOMrTXgk6oM0AlWUJVtX4ZmxJosCNiJLeFN4cfmWVxtt_GJUAOawoDaBqF-86qc9z1HJAgT2x5EMiwyVHtqFtpfQjMdAz_TTA8-q/s1600/twitter-icon.png'/></a></td>

<td><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpE0QcRWU0PoV33n0qm27gm9_Hh29BCS03yAS_lnBVWKwGm7Ww8QvlcmQpPy-vGt177VKEOzhhhy_iRl3mH2RPXm12vqLX8s6DHqfBw5rNCxbCYxYrK7xUjECjnWfYxf5TY9BK6nfMTNR/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihWT9A-tZVtnc6J3MM8PPR2K9Ry3TutX0cMEQXhUOalG7tSLEg3Ww4sI2t-qEemVb9XEqRJaZvzg_pGVcZFFLdLSHtyH5sa7T6n0liiLZzYHdNKnQH15As_OQzLCNVeOTymM6H7tRrEJxQ/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF77sJHzX8HQA14YuF0Tpi6sZo49JmHEKRTEBBQTf8rpkkCMS07G5c8QkBw65WvHo4MpUNUkBfQ46b3-letMdViJthgaTdpPSV9QbyWsq9L6Zq5qY70Ch8V8CBzSnCNLl80oApAhw0lsGb/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-WBtieP-CNmina9ZRChw1kayA2F21Ly0T5JSvLPNlk1kiBaNv3srvNMl9BXrlbEhut6eorxiFpTZ1vfGpBT0HKpuAIuNsf1UFmGad354ofZWBTjNUsiOgekvfR97Dbub3CtHRkt2suJ9/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQKZwFWeSxXUYAL4FC-VrSJAu1PaWNHiy8iBFC7H2xP-SXvZdi5LYEzVvfc-AWyk_7I3hpJqnfJwZV2IyWYiLb5ih5EYFCo2BVuaaIGhJ3AKuai-GFCE-laNOYnVkY_gJ5oijK1WQH1Hvw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDosyup5Gk1_wIInrl8BkbMrC9Ob7zm5l79nbxbBzTJEjB6GsxZXvcSEov22bN-0GYp-oVfe03bj4halnWbEx-EcjAdEpLHOPm-U4OcQrkg4xC1fC4p0qOkMCOpypkxOxqYeJF754kzii/s1600/China.png' width='24'/></a></td>

</tr>
</table>
</div>
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 </tr> tag:
 <td>Add here the extra content</td>

 http://helplogger.blogspot.com/2014/02/how-to-add-floating-sticky-footer-bar.html