Removing Blogger/Blogspot Branding from your Blog

When you create a blog with blogspot.com, there should be this annoying navigation bar at the top. Annoying because it's your blog and you should be able to decide whether you want to keep it there or not. Sure, it's got options to "follow" and "share" the blog, blah blah. But I would have liked it if I were given a choice to keep it or not. Then there's the "Powered by Blogger" footer. Not something I want there at the bottom. Or anywhere else.

Blogger gives you an option to insert custom CSS rules. You should find this option under
Template Designer > Advanced > Add CSS. Once there, you should be able to set new styles and even override existing ones.

Removing the Navigation Bar and Footer
Add the following lines in the Add CSS space in the Template Designer.

.navbar {display:none}
#footer-3 {display:none}
#HTML1 {margin:0px}

Here, line 1 is to hide the navigation bar while lines 2 and 3 are for hiding the footer. To add your own custom footer, go to Layout and insert a new HTML/Javascript gadget with something like

<div style="text-align: center;">
© 2011 Your name.
</div>

 at the bottom near the original footer. Click on save arrangement. Your changes should now be visible on your blog.

What else...
If you notice the search box at the top in this blog, it does not have the customary "Powered by Google" branding. Also I have tweaked the search results box a little to make it go better with the theme. I use the following code for this. You are welcome to use it for your own blogs as well. I have to admit, it's just a little buggy. But it's ok. This is a Blogspot blog after all. If you were actually serious, you would be using Wordpress.

.gsc-branding {display:none}
#uds-searchClearResults {border-style:none}
.gsc-tabHeader .gsc-tabhActive {border-left: none;border-right: none;border-top: none;}
#uds-searchControl .gsc-tabHeader.gsc-tabhActive {border-style: none;border-width: 0;}
.gsc-resultsbox-visible {box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);border-style:none}
#uds-searchControl .gsc-results {border-style: none;border-width: 0px;width: none;margin: 20px -16px;}