Love CoffeeShop Freebies?

Image and video hosting by TinyPic
Hi! My name is Rita and I am the blogger behind CoffeeShop and a stay-at-home, home-schooling Mom to two naughty but adorable little boys (Duke is 7 and Imp is 5), wife to my high school sweetheart, and passionate about all things photography.

If you are visiting for the first time, welcome! Please read all about my CoffeeShop blog here. Everything on my blog is 100% free!

If you love using my free CoffeeShop creations and would like to make a donation to Rita the self-professed photo-editing photography geek of CoffeeShop, please follow this link! This blog is possible because of your generous support.

Search the CoffeeShop for all of my free goodies!!!

Custom Search

CoffeeShop Blogger UnWrapped: Removing Blogger Navbar

>> Tuesday, August 25, 2009

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 Thoughtful Comments:

Natalie August 25, 2009 3:04 PM  

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

Chelsi August 25, 2009 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!

Little Log August 25, 2009 3:21 PM  

Worked perfectly! Thanks!

RobinCT August 25, 2009 3:27 PM  

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

Erica August 25, 2009 3:33 PM  

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

Sam August 25, 2009 3:41 PM  

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

Sam.

Kathy August 25, 2009 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!

Dana August 25, 2009 4:07 PM  

Thank you, thank you, thank you!

Jessica Kok August 25, 2009 4:15 PM  

THANK YOU!!! I hated that thing!

Natalie August 25, 2009 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!!!

Rita August 25, 2009 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!

susy August 25, 2009 6:50 PM  

You rock...

Kier and Nic August 25, 2009 9:13 PM  

Thank you thank you!

Addisons_mommy August 26, 2009 3:52 AM  

Thank you for all you do!!

Tammy Dunlap August 26, 2009 9:55 AM  

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

flip flops and pearls August 26, 2009 10:27 AM  

Very good post!

That thing is so aggravating-

have a great day!

dxeechick August 26, 2009 7:16 PM  

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

Gladie August 28, 2009 4:17 PM  

Thank you! So easy once you know :)

Mark, Lana and Gabe August 30, 2009 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!

MKC August 30, 2009 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.

Queen of Quite-a-Lot August 31, 2009 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!

A Little Licht on the Subject... November 15, 2009 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!

Jennifer Banta April 24, 2010 1:35 PM  

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

kimhilde June 24, 2011 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.

CT Photography | Blog August 3, 2011 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.

Sooriya September 6, 2011 8:20 AM  

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