Well, for those who prefer to convey a custom toolbar that does non laissez passer on them such problems together with permit them to buy the farm on using other scripts, here's how to practice our ain floating toolbar amongst a unopen option.
The toolbar contains a search box, link for feed subscription, link to follow on Twitter together with Facebook, similar push to part on Twitter or Facebook together with translator inwards 5 languages.
You tin laissez passer on the sack run into it working inwards this demo blog.
Adding a Custom Sticky Toolbar on Blogger
Step 1. Login to your Blogger concern human relationship > pick out your weblog > click on the "Template" selection on the left side
Step 2. Click on the Edit HTML push on the correct side > click anywhere within the code expanse together with press CTRL + F keys to opened upwards the Blogger search box
Step 3. Paste or type the next tag within the search box together with striking Enter to uncovering it:
]]></b:skin>Step 4. Just higher upwards ]]></b:skin> add together the next CSS style:
#custom-toolbar {Step 5. Now search for this tag:
overflow: auto;
position: fixed;
background: #1B1B1B url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsr-9cZyBi4qhnT3EXNhmIChDMeVQw4YPa0wWbTaoZ_71K99gFAlCy_fXb1M-rtmoCf4LmgwNFqxpekTl26737gzH2m3oFYONgCe3ZepUAqPFxjoif-f219CHA0J1WSdjn9sPj5Gl5y9g0/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;
}
</head>Step 6. Just higher upwards the </head> tag add together this script:
<script type='text/javascript'>Step 7. Now search for the </body> tag together with simply higher upwards it, add together this HTML code:
// Custom Toolbar for Blogger (helplogger.blogspot.com)
//<![CDATA[
var toolbar_blogger = novel Array();
var toolbar_clear = novel Array();
business office 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);
}
business office toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
acre ( parentOffset != cipher ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
furnish toolbTotOffset;
}
business office toolbarFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}
business office closeTopAds() {
document.getElementById("custom-toolbar").style.visibility = "hidden";
}
//]]>
</script>
<div id='custom-toolbar'>Finally, modify what is inwards blue amongst the URLs of your Facebook together with Twitter profiles.
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx-CbLM0r1XQxMJjosrn3BnX9kGDp1bEeB2Ezbuar46UHfca7ViaDE9fbOIrtW3CvALDzlMAwDlvf0vs0vbWIw6izD1da2oPErHgZfiIN0hSZm2MxF-rAoJmOtjrs8UA_Tq99IHXb4r-73/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/AVvXsEgVO8HckPDYuXx0-jNsZV1C-48MqULIfWjpvXS3fqr4XEDdshMzry0JvlmUAnGGWPzI70VLRRsVzSoWFFAyZkg_3S0-_dGhsS_se7ayncaHpmEh5pU45wwaDgRT5Htj9u25TUSFl85WlFCX/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/AVvXsEjFPn0kibJ7BYeY0x9Of0OpvecQMIZM2M9o9U5T2t9AA54Ir0P1ZVZvGG4e_hewWG3x4ziv_X8-U9xEhoiODBV8YDhSQdT8j0wQcqEZy93Tgmz_Sj99vZhElCprd-8gn5Uey7VBdMHUsCpc/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/AVvXsEjbODj5X88NUGCQN6svOLwps2FzLCk9PZGkRPVanT9__HuM-QwD4bjGmy-hCUjlOhbPb1s4UBry3LHBp3b18vdDto7-KCnUVbm7fuGPZNn2qRAmP16lcQsigIm_92ctpeMaMwTsAyZ2GALC/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"); furnish false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQmLJbsLf7ZTVLn7bS9gllhza8kCJGh46nThYZrh-nD0yuNo_c1J_dS8eM18W4k-1G_2g8H38KinghSP1OnEMPLBf6EsfulnjttguwwFqRuRp3Vi5M1Fvjqe53toY5TIbuHPEjs-bOUodE/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"); furnish false;"><img alt="I convey seen that many of those using toolbars such equally Wibiya convey had to withdraw it because How To Add a Floating Sticky Footer Bar inwards Blogger " border="0" align="absbottom" title=" How To Add a Floating Sticky Footer Bar inwards Blogger " height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ksGKYR-bBVhdtybCIH5MR7MNuPwiSxZL-RrWt4704_eX_nut-lohXVH-gldLYfnxmSkh8pWHkOL-WhnZmAAZZdvPe1AEg7U_T2yueG-_Yb7t6Q5Dcyu-xN5aw-qM3KzQMaNrkAG-VeXD/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"); furnish false;' rel='nofollow' title='French'><img align='absbottom' alt='French' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkHDtAfZcH-MHaFfycJY7RtfNq046Qit6oy-J9X9tjkTbtCm3ZD2geKglSnDu6X12Bz5Ywwri8MjBA9nN_r4FTDNMMP3lnlvP51SRMDMsTtSngN_4WNTbFFyeH606DZeQBBdtLby6L4O9u/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"); furnish false;' rel='nofollow' title='Arabic'><img align='absbottom' alt='Arabic' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xjhrHQNbiP2UPQoQ0jO8QHuKBAzRi8UCFOA2GaIW3_C5DZpY62XHY6pOAiBivTv-QcfNNzUYgwqat8zQKpM7H5w-0SkZLq0god5VcY_WnoUM2_s-0nzZEqDZs4e4tQ5v7vAtwi1Tc3EA/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"); furnish false;' rel='nofollow' title='Chinese Simplified'><img align='absbottom' alt='Chinese Simplified' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipd_Iu7MbJovdn80XckUFlxrH0Z2to3OKhyxG4Iy7sfCnVvJ0yoCSyi-ZODzIGMFPaynUIZCBmz9zzATP_WpYMNc0IgFNWqn1Bq9aqS3rcs5aKvrj6sxxO3Rk8OlD9aBh63dbVVz-cHUqr/s1600/China.png' width='24'/></a></td>
</tr>
</table>
</div>
If you lot desire to add together to a greater extent than items, such equally a counter, links etc. add together a employment similar this simply earlier the </tr> tag:
<td>Add hither the extra content</td>Add the content where is indicated together with that's it.
As you lot tin laissez passer on the sack see, it is non necessary to depend on external sites to convey a toolbar, from straight off on you lot tin laissez passer on the sack convey a floating viscous toolbar on your Blogger blog.
Comments