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



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

11 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. great post. but brother pls add a demo link - Navbar in sidebar

    ReplyDelete
  2. Wow man that is so cool. Thank you let me try it.

    ReplyDelete
  3. Nice trick, Now what happens to those of us who removed the nav bar and want to implement the your tip? I ask this because whenever I input the code above in html/java widget, and save. there's no changes.

    ReplyDelete
  4. @azgor

    Request completed! :>

    @fernando

    my pleasure.

    @Felix
    That is the good thing about it. You don't need to show navbar at top. The Widget will work on its on. Just copy and paste the code. That's it. And Yeh I have updated the code, you may check now

    ReplyDelete
  5. @Mohmd, Not once, not twice I have tried to implement the above tip but to no avail. I followed the instruction as you indicated but the moment I save to see the changes, nothing is forthcoming. Pls do examine my blog and tell me what could be the problem. I intend'd to add it at my blog posts. Nice wk'end.

    ReplyDelete
  6. Thanks... This is really nice idea... i`ll try this now.

    ReplyDelete
  7. جربت زي ما شرحت يا استذا مصطفي ولم يظهر عندي
    مش عارف من اية المشكلة

    http://egy-after-25.blogspot.com/

    ReplyDelete
  8. Don't you think my Navbar matches my blog well ! but I'm thinking to remove "report abuse" & "next blog" option from NavBar. Do you have that simple way for that ? please leave a comment for me.

    http://tip4tec.blogspot.com

    ReplyDelete
  9. It's not working for mine blog, http://bhawanacity.blogspot.com/
    Can you plz tell any bug, is there?

    ReplyDelete
  10. Mine says:

    We are sorry, but we were unable to complete your request.

    The following errors were found:
    searchRoot: URL contains illegal characters
    homepageUrl: URL contains illegal characters

    Any ideas on this?

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

    ReplyDelete