Blogger Top bar/Toolbar with Scrolling Bottom and Top Button

[This article described you about Floating Top-bar or Toolbar in Blogger site. Just you need to copy paste below code and paste it in a gadget of your blogger site. Uses script – Jquery, java script and css]

It’s a very nice top bar or toolbar which you can now see at top of my site. I had always tried to make this type toolbar especially in blogger site. At last I made it for blogger site and I am satisfied. Now the question is what is the specialty in this toolbar or top bar? This is a nice toolbar which only appear after crossing header section, live demo just in front of you. Scroll down at top toolbar automatically vanished but when you appear at body section this toolbar will visible. The most important things in this toolbar are I included a “Scroll to Bottom and Scroll to Top” button in a same place. When you move down some part of blog “Scroll to Top” button will appear, if you located at first section of blog then “Scroll to bottom” button will appear. You can add menu or social

button or search engine or subscriber box anything’s in this toolbar.

How to Install this Blogger Top bar or Toolbar?

I made it very easy, just copy paste code from text area box and add it as a gadget in your blogger site. Now you have done your work, your toolbar will start working. According to your desired change content item in tool bar or edit css but this function only for advance users. I host all script, if you wish to host it another place then no problem. If anybody feel problem feel free to drop your comment here, I will help you.

Live DEMO -

Just notice top position of my site.

Main Code for Blogger Gadget (Just Copy Paste)

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<link rel="stylesheet" href="https://www.dropbox.com/s/igx5oxpy9w5d4i8/style.css?dl=1"/>


<script>

$(document).ready(function()
{

$.preloadImages = function()
{
       for(var i = 0; i<arguments.length; i++)
       {
               $("<img />").attr("src", arguments[i]);
       }
}

$.preloadImages("https://www.dropbox.com/s/elubwycn78693dj/toparrow.png?dl=1","https://www.dropbox.com/s/y7kzty6ihns7jzu/bottomarrow.png?dl=1");

var $top1= $('#minibar').offset().top + 20;
var $mid1 = Math.floor($(window).height() / 2);
$('#dirbutton').data('mode','scrollup');

$('#dirbutton').click(function()
{
   $mode = $(this).data('mode');

   switch($mode)
   {
     case 'scrolldown':
      $('html, body').animate({scrollTop:0}, 'slow');
   return false;
   break;
case 'scrollup':
     $scrollpos = $('body').outerHeight();
     $('html, body').animate({scrollTop:$scrollpos}, 'slow');
return false;
break;
   }

});

$(window).scroll(function()
{

if ($(window).scrollTop()>$top1)
{
   $('#floatingbar').hide();
   $('#minibar').show();
   $('#minibar').addClass('floater');
}
else
{
   $('#minibar').hide();
   $('#floatingbar').show();

   }

   if($(window).scrollTop() > $mid1)
    {
       $('#dirbutton').find('img').attr('src','https://www.dropbox.com/s/elubwycn78693dj/toparrow.png?dl=1');
    $('#dirbutton').data('mode','scrolldown');
       $('#dirbutton').show();
    }else
    {
    $('#dirbutton').find('img').attr('src','https://www.dropbox.com/s/y7kzty6ihns7jzu/bottomarrow.png?dl=1');
    $('#dirbutton').data('mode','scrollup');

    }
});

});

</script>

<div id="container">

<div id="minibar">
   <ul>
         <li style="margin-top:7px"><a href="http://www.ebook.allursolve.com"><button>Home</button></a></li>
     <li><table width="">
<tr>
<td width="">
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-455f8d11-52a-4557-cf30-83ec9b70f99f"}); </script>

<span class='st_facebook_large' displaytext='Facebook'></span>
<span class='st_twitter_large' displaytext='Tweet'></span>
<span class='st_linkedin_large' displaytext='LinkedIn'></span>
<span class='st_email_large' displaytext='Email'></span>
<span class='st_plusone_large' displaytext='Google +1'></span>
<span class='st_sharethis_large' displaytext='ShareThis'></span>
</td>
</tr></table></li>
     <li><table>
<tr>
<td>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=AllurSolve" target="_blank" title="Subscribe Us for Auto Update"><img src="http://i1080.photobucket.com/albums/j340/allursolve/rss.png" alt="Subscribe Us" /></a></td>
<td style='float:right'>
<iframe frameborder='0' height='33' scrolling='no' src='http://pdf.allursolve.com/All-Search-Box/Allursolve/index.html' width='310'/></iframe>
</td>
</tr>
</table></li>

      <li><a href="javascript:#"><button title="Scroll" id="dirbutton" class="default">
        <img border="0" src="https://www.dropbox.com/s/y7kzty6ihns7jzu/bottomarrow.png?dl=1" /></button></a></li>
   </ul>
</div>

</div>

</!doctype>