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.