How To Add Together A Floating Viscid Footer Bar Inward Blogger
I accept seen that many of those using toolbars such equally Wibiya accept had to take away it because of interfering amongst the surgical operation of to a greater extent than or less scripts similar Scriptaculous together with Prototype, spell others accept chosen to take away these scripts but to drib dead along using the toolbar.
Well, for those who prefer to accept a custom toolbar that does non plough over them such problems together with let them to drib dead along using other scripts, here's how to practise 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 clit to portion on Twitter or Facebook together with translator inwards 5 languages.
You tin run across it working inwards this demo blog.
Step 2. Click on the Edit HTML push clit on the correct side > click anywhere within the code surface area together with press CTRL + F keys to opened upwardly the Blogger search box
Step 3. Paste or type the next tag within the search box together with hitting Enter to honor it:
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 but earlier the </tr> tag:
As you lot tin see, it is non necessary to depend on external sites to accept a toolbar, from at i time on you lot tin accept a floating glutinous toolbar on your Blogger blog.
Well, for those who prefer to accept a custom toolbar that does non plough over them such problems together with let them to drib dead along using other scripts, here's how to practise 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 clit to portion on Twitter or Facebook together with translator inwards 5 languages.
You tin run across it working inwards this demo blog.
Adding a Custom Sticky Toolbar on Blogger
Step 1. Login to your Blogger concern human relationship > direct your weblog > click on the "Template" pick on the left sideStep 2. Click on the Edit HTML push clit on the correct side > click anywhere within the code surface area together with press CTRL + F keys to opened upwardly the Blogger search box
Step 3. Paste or type the next tag within the search box together with hitting Enter to honor it:
]]></b:skin>Step 4. Just inwards a higher identify ]]></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/AVvXsEiQ3QcVjEdtxe-41tEFO7xR6oHkCQgBX9W7r7RGUjAn6DRk8iUPMN7jLPQ7enVp5WK-Xa9JslZEu8iYB3kkSwhofR8rewLroNxpLPQObRDgbKx6eLqymrcncrVM8hiFFQHQHtDn5B7bnNDX/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 inwards a higher identify the </head> tag add together this script:
<script type='text/javascript'>Step 7. Now search for the </body> tag together with but inwards a higher identify it, add together this HTML code:
// Custom Toolbar for Blogger (helplogger.blogspot.com)
//<![CDATA[
var toolbar_blogger = novel Array();
var toolbar_clear = novel Array();
component division 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);
}
component division toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
spell ( parentOffset != naught ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
provide toolbTotOffset;
}
component division toolbarFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}
component division closeTopAds() {
document.getElementById("custom-toolbar").style.visibility = "hidden";
}
//]]>
</script>
<div id='custom-toolbar'>Finally, alter 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/AVvXsEiNqwtm89YzV6RADshTocqW2o2YJdQKBQqc9JzIRM_kMpInvaqhZgpCE-rMtZlOUA0msjKGkbPTt5xp0OoBG054DC5hYn9SQExiO9GAzkPq8Aem-Lh_fbhxPs5nhlQdhawoviMbIg1Q1hNR/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/AVvXsEiHz25MOhhSjd9kxAvIDDxSlZURzPJRZngxGqai-bwOzpocSwrqj3duTnNDEpodUY1rzm7j7o-c6lbKqwJ2tzkqvHxB2EKBNj9Mqspu7KPJaZjogI-vhk0ZnkR7MFk2gdVyawAajK7EAzFT/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/AVvXsEh_vpt6pG7mOSZIznlM-rDz0g5fJt9wrlzx7fFXVOZiI_J5jTuY1cg6EAfy_Xyz25o2Sd5QCKyDPoedrp7ZRXVOCSh8MBMsqnsUtHMFm4LMPKSNcvT5bHg1v2HmpKlJNtfc-1hXpwisdugT/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/AVvXsEjKMTsMuu_0rW6Y3g9ryTt_B1ID047qMH2erRNrHklJaN_z0PrZh4L3dYhWDnJUzU4MBuOxaLNE1IkwS5mFWEbrqzbmfJmMKoEsdy2tBPioX0Sj2oY-Olxnwf2s-GeINZ1g7zkkmZKTlOyi/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"); provide false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb45g_Z7htv8nQspWM4Fk2FKDWVbDKOhXtfa6xCWCNOhhKEl_tByu4WKZV3jakEuDryc-oFqm2c18BcAAXUKzOROFfrOcPeisF8a911lXBFC_DkJ0CJWZB2PAIYrPCNVAOl1PFSxPpo3Bw/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"); provide false;"><img alt="I accept seen that many of those using toolbars such equally Wibiya accept had to take away 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/AVvXsEigUYgWJA3_lFpbPO4esYPAIOhoAuns8v0EvwSehYFxpS8f8V-8rYNSJjRcGmBxf9uZx00j9AvxS-jYSN1sBHtpeIL5aIctdVJ17PmDsax5DN0upmN4SDyYtYxrcJgJUG6PoUYfG8CqzV51/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"); provide false;' rel='nofollow' title='French'><img align='absbottom' alt='French' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNsFStj3s8hYEtYC54OBPsIOZIr1Y7PDfedgO_2ej4NJWqmd1PtvL_Hsyo9242je3g4JbsOP2oL9GBADGJB7KqFW8qW25q_5sf3rAzZJiQNq3SWUg6sIebrOOJdfYs6-MNJT_zmXnZdyT/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"); provide false;' rel='nofollow' title='Arabic'><img align='absbottom' alt='Arabic' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1QgCsZewlT1gBDq-c-Wcnlf4Tv2Ao0bCV_8FnSsNr9fVJN3RTX70hKkiNYxrOYhhPugzuzDM72-_78v0NGYeisdhnjOethuzo1COPAVAqC3-6upiM-DLyK-yVVkYZzPbA5DtGdAamxz_b/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"); provide false;' rel='nofollow' title='Chinese Simplified'><img align='absbottom' alt='Chinese Simplified' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi26r8cxQ2R4gsKfuZypLRCvVqKb_eNC4_kFN_7Vkvf3oY23lH4AY0EpDo81Wk28C2_m0-lo_Utc2yhto1l3XyozQN__ouM-O_HaYoGiwgbgBTaJRAylEoJebPRWewrey9jGolsyLl6QyUI/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 but 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 see, it is non necessary to depend on external sites to accept a toolbar, from at i time on you lot tin accept a floating glutinous toolbar on your Blogger blog.
