April 6, 2010

Move Blogger NavBar to Bottom Blog Autohide

love bloggers
Blogger and wordpress is known as the best free blogging platform. Currently blogger had increased their features step by step. It makes us more convenient and confident use blogger as a platform. It is free of charges either the domain or the bandwidth although we have some limitation but it is still acceptable. Blogger NavBar is one of the annoying feature that mostly avoid by senior or professional bloggers. It makes the page view poorly. So many bloggers remove or hide this navbar. The other solution to pay some respect to our free platform (blogger) is moving the NavBar from the top of page to bottom of page also hiding it and shown only when the mouse hover at the bottom page. This is the best solution i thought that will give us win-win situation. Thats my instinct. We don't know when will blogger change their TOS regarding the NavBar someday. The trick is quite simply.
The Blogger Navbar appears by default at the top of every Blogger-powered blog and the features include:
  * Takes you back to www.blogger.com.
  * Search Blog: results showed directly on the page.
  * Flag Blog: mark blog as objectionable.
  * Share: promote to Twitter, Facebook, Google Buzz & Google Reader
  * NextBlog: go to updated Blogger blog.
  * Email Address: if you are logged in.
  * Dashboard: a link to your own dashboard.
  * Sign In/Out

THE TRICK
1. Log in to your account and go to Layout => Edit HTML
2. Scroll down find "Variable Definitions" or Body {

3. Put this snippet code after Variable Definitions or before Body {
* html #navbar-iframe {
position: relative;
}
#navbar-iframe{
position: fixed;
bottom: 0px;
opacity:0.0;
filter:alpha(Opacity=0,FinishedOpacity=0)
}
#navbar-iframe:hover{
opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100)
}
4. You can change some variable i.e.:

* Your NavBar position from bottom page at : bottom:0px;
e.g.  bottom: 10px;

* Opacity when mouse hover at :
  opacity:1.0;filter:alpha(Opacity=100,
  FinishedOpacity=100)
e.g.
  opacity:0.7;filter:alpha(Opacity=70,
  FinishedOpacity=70)
move navbar blogger
Blogger made good effort to make sure the Navbar doesn't interfere with custom template designs by  provided several colors to suit your template. Hopefully uncle Google gives more love and more frequently  crawl your sites as you still put this navbar. Pray he will gives you more PR juice. lol.
The weakness is this tweak only support Mozilla Firefox browser and Opera. I.E still does not support advance HTML up till now. Luckily more than 50% bloggers or webmaster already use the famous firefox browser that kindly support advance HTML. Do you like this tricks or you prefer remove/hidden your navbar at all? Let me know your thoughts. Everyone has his own choice, you are a free bloggers.

4 comments:

  1. WOW!! This is wonderful. I've been trying different methods without result. Yours works PERFECTLY. Many thanks!!

    ReplyDelete
  2. ur welcome orilea... hope u like that

    ReplyDelete
  3. nice educational post,thanx

    ReplyDelete
  4. Thanks! Interesting, is there some way to put fixed navbar on the bottom of page where the blog attributes is? Now navbar is moving when scroll up/down.

    ReplyDelete

Please Don't Spam

Newer Posts Older Posts home
 
Down
Go TOP