Get Latest Tricks Alert Daily
Follow Readers

Customize Blogger Navbar - Add It To Sidebar!


We 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.

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 navbar
black navbar

silver navbar
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,
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+Trick 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 with your blog link (exclude http://) If your blog URL is then simply write
     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!


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!



  1. Thank you so much. You have explained it very well.
    You can visit me at: Bloggerjin Tutorials

  2. very informative articular, Thanks for sharing this