Tuesday, August 25, 2009

CoffeeShop Blogger UnWrapped: Removing Blogger Navbar

I have been posting my CoffeeShop Actions UnWrapped series for a while (I explain step-by-step what my actions are doing), I am adding CoffeeShop Editing 101 (basic photo-editing tutorials) and now I am starting a second new series, CoffeeShop Blogger UnWrapped. Blogger UnWrapped is going to share secrets to tweaking Blogger templates and making them your own. It has taken me months to figure out all of this stuff, and I am going to teach you all of the best Blogger tweaks!

A few of the things I have planned for the next months are making your 2-column blog wider, making a photoblog or 3 column blog, adding a horizontal menubar, making blog buttons, changing your background, adding post dividers, making slideshow headers, and removing those annoying wrenches by your columns. If there is anything in particular you are looking to do on Blogger, leave a comment and I will try to add it to my list.

On to my tutorial... Today we are going to remove that pesky blue Blogger Navbar on top of your blog. If you like it but want it another color, just go to Layouts, Page Elements, Add and Arrange Page Elements, and find the blue Navbar on top. Click on Edit and select your favorite color. However, if you want it gone, please continue to read this post!



There is your Blogger Navbar on top. It is easy to remove with a bit of template tweaking. And then you can still access your blog to make changes via the Dashboard rather than the Navbar (just log on to Blogger, and bookmark your dashboard to save yourself time in the future).



1. Go to Layout, Edit HTML and immediately Download Full Template. This saves a copy of your original template so if you mess something up you can go back to it at any time. Give it a name that you can easily remember and stick it on your desktop.

2. Click on the image above if you wish to see it larger! Find the area around the blue hightlighted text (you will be adding this) in the image above(it is at the top of your Html just under the Blogger template information and just above Variables definitions ) and add this Html:

#navbar-iframe {display: none !important;}


3. Preview your template. If it does not open click Clear Edits and start over. If your Navbar is gone, then Save Template and you are done! See the image below, no Navbar.

26 comments:

  1. This is exactly what I was looking for - great topic and great tutorial! I need all the help I can get!

    ReplyDelete
  2. I just wanted to be the first to say THANK YOU! I love that you put your own time into helping people like me to figure these things out. I can't wait to learn all that you know about personalizing my blog. I know quite a bit but a few things are still confusing and I'm afraid to mess with the html too much. With your help I'll be much more brave about trying new things :)

    One thing I have a question about is this:
    The sidebar on my blog is suddenly below my posts! It's driving me crazy that I can't figure out how to get it back on the side. I reset everything and changed all of my settings to default and it's still on the bottom. If you know what to do could you please let me know?!?!?

    Thanks again!

    ReplyDelete
  3. Perfect!I can't wait for the next tutorial!

    ReplyDelete
  4. That's GREAT! I hate that navbar. Hahaha. Awesome. I just fixed my blog! Thanks for the info!!

    ReplyDelete
  5. Great instructions..so clear and precise. It worked perfectly. Thank you!

    Sam.

    ReplyDelete
  6. I am new to blogging and WOW I am lost!
    I really appreciate you taking the time to share with us your knowledge. *Really* appreciate!

    ReplyDelete
  7. Thank you, thank you, thank you!

    ReplyDelete
  8. THANK YOU!!! I hated that thing!

    ReplyDelete
  9. Great tutorial - my only question is how to I then access the Blogger editing template? I used to always click on the link that was in the Nav bar.

    Thanks again!!!

    ReplyDelete
  10. Natalie, just bookmark www.Blogger.com (after you have logged in) and make all changes through your Dashboard. Almost as easy as the Navbar and much nicer looking!

    ReplyDelete
  11. Cool thanks! Was wondering if there was a way to do this or not!

    ReplyDelete
  12. Very good post!

    That thing is so aggravating-

    have a great day!

    ReplyDelete
  13. Thanks! So simple! Can't wait to see more :)

    ReplyDelete
  14. Thank you! So easy once you know :)

    ReplyDelete
  15. This is great! I am very interested in learning how to make a photo blog, so I'll look forward to that!

    ReplyDelete
  16. I love these tutorials, thanks for sharing them. I thought of another tutorial that would be interesting if you have time. How do you make a cute icon to go next to your blog address at the top of the screen or next to your blog name in Bookmarks? I noticed you have a cute coffee cup but the default is an orange box with a "B" in it.

    ReplyDelete
  17. Thank you! That Navbar has always annoyed me!
    And thank you for everything else you do for us! You're are so giving and such a blessing!

    ReplyDelete
  18. THANK YOU! I found you Betsy Veldman's blog. Tried your tutorial for removing the nav bar (HATE that thing!) and did it. Awesome! I'll finish reading and be back for more!

    ReplyDelete
  19. Awesome! Thanks so much for all your tips! I love trying them all out!

    ReplyDelete
  20. Hi! Thanks so much for the tip! Minor problem though - I now have a white area I want to disappear where the nav bar was.....any thoughts on how I do this? my blog is: http://kimhildebrand.blogspot.com/. Thanks so much for all your tips!! I love reading your blog.

    ReplyDelete
  21. Hi I was reading over the tutorial here about removing the Navbar (I still haven't decided to commit to it yet). I was wondering if you ever wrote the tutorial on adding post dividers? I do sometimes miss things. I love your blogger tutorials. They have helped me figure out several things. Thank you.

    ReplyDelete
  22. Thank you for sharing this! I really appreciate what you do, and I simply love your actions :)

    ReplyDelete