Customize Blogger Navbar - Add It To Sidebar!


custom-blogger-navbarWe can make a custom navbar using the Blogger Official Search and Navbar widget provided in different color schemes. This is again a great trick using the Iframe Technique. This idea came into my mind just last night when I observed that the source file of our blog had two Iframed widgets one is the poll widget and another is the Navbar. Fortunately, this is again a first time shared tutorial by us. Although we often remove Blogger Navigation bar but its Search function and share and follow links can prove very important.



Live Demo

Below you can see a customized version of the same navbar in two modes.

When users Log in, they will see this:
custom navbar

When users Log out of Blogger, they see this:
blogger custom navbar
On clicking the share link, readers can share your blog post on Twitter, Facebook, Google Buzz or Google Reader.

navbar share option
On clicking the follow button, you can follow the blog updates:
follow button on navbar
The following Navigation colours are available:
TAN:
tan navbar
BLACK:
black navbar

SILVER:
silver navbar
BLUE:
blue navbar


Add Blogger Navbar To Sidebar

You can use the code below to add the Navbar anywhere you want and not just the sidebar. You can add it to your blog posts also. To add the widget to your sidebar simply do this:
  1. Go to Blogger > Design
  2. Choose a HTML/JavaScript Widget
  3. and Paste the code below inside it,
<iframe 
src="http://www.blogger.com/navbar.g?targetBlogID=8193278726666811965&amp;
blogName=My+Blogger+Tricks&amp;publishMode=PUBLISH_MODE_HOSTED&amp;
navbarType=SILVER&amp;layoutType=LAYOUTS&amp;
searchRoot=http%3A%2F%2Fwww.mybloggertricks.com%2Fsearch&amp;
blogLocale=en&amp;homepageUrl=http%3A%2F%2Fwww.mybloggertricks.com%2F&amp;" 
marginwidth="0" marginheight="0" scrolling="no" 
frameborder="0" height="30px" width="237px" id="navbar-iframe" 
allowtransparency="true" title="Blogger Navigation and Search"></iframe>
Make these changes:
  • Replace 7193277726666811965 with your BLog ID. Go To Blogger > Design and now look in your browser address bar, you find a long digit code. Copy it and paste it in place of this number 7193277726666811965
  • Replace My+Blogger+Tricks with your Blog Name. It is the name of your blog that you see in your blogger dashboard. Remember to separate each word with a plus sign (+)
  • Replace SILVER with your prefered colour scheme in capital letters. You can try four colour schemes which are : 1) BLUE    2) BLACK   3) SILVER    and  4) TAN
  • Replace www.MyBloggerTricks.com with your blog link (exclude http://) If your blog URL is http://xyz.blogspot.com then simply write xyz.blogspot.com
     4.  Save your widget and you are done!
View your blog and start playing with the official search box along with the free follow and share option. Have fun!
Need Quick Help within 24 Hours? ASK NOW