Tuesday, August 25

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.

Labels:

26 comments:

  1. NatalieAugust 25, 2009 at 3:04 PM

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

    ReplyDelete
  2. ChelsiAugust 25, 2009 at 3:12 PM

    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. UnknownAugust 25, 2009 at 3:21 PM

    Worked perfectly! Thanks!

    ReplyDelete
  4. RobinCTAugust 25, 2009 at 3:27 PM

    Perfect!I can't wait for the next tutorial!

    ReplyDelete
  5. EricaAugust 25, 2009 at 3:33 PM

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

    ReplyDelete
  6. SamAugust 25, 2009 at 3:41 PM

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

    Sam.

    ReplyDelete
  7. KathyAugust 25, 2009 at 3:50 PM

    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
  8. Dana AllardAugust 25, 2009 at 4:07 PM

    Thank you, thank you, thank you!

    ReplyDelete
  9. Jessica KokAugust 25, 2009 at 4:15 PM

    THANK YOU!!! I hated that thing!

    ReplyDelete
  10. NatalieAugust 25, 2009 at 4:50 PM

    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
  11. RitaAugust 25, 2009 at 4:53 PM

    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
  12. susyAugust 25, 2009 at 6:50 PM

    You rock...

    ReplyDelete
  13. KierAugust 25, 2009 at 9:13 PM

    Thank you thank you!

    ReplyDelete
  14. AnonymousAugust 26, 2009 at 3:52 AM

    Thank you for all you do!!

    ReplyDelete
  15. Tammy DunlapAugust 26, 2009 at 9:55 AM

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

    ReplyDelete
  16. nomo wino daphAugust 26, 2009 at 10:27 AM

    Very good post!

    That thing is so aggravating-

    have a great day!

    ReplyDelete
  17. dxeechickAugust 26, 2009 at 7:16 PM

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

    ReplyDelete
  18. GladieAugust 28, 2009 at 4:17 PM

    Thank you! So easy once you know :)

    ReplyDelete
  19. LanaAugust 30, 2009 at 4:41 PM

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

    ReplyDelete
  20. MKCAugust 30, 2009 at 9:02 PM

    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
  21. Tara.August 31, 2009 at 10:01 PM

    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
  22. A Little Licht on the Subject...November 15, 2009 at 1:38 PM

    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
  23. JenniferApril 24, 2010 at 1:35 PM

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

    ReplyDelete
  24. kimhildeJune 24, 2011 at 12:30 PM

    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
  25. Laughter & Love Notes Photography | BlogAugust 3, 2011 at 2:52 PM

    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
  26. SooriyaSeptember 6, 2011 at 8:20 AM

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

    ReplyDelete

Thank you for taking the time to leave a message, I love reading them! All comments are personally moderated by me and I will post and answer them them as soon as possible.
Rita

Subscribe to: Post Comments (Atom)