Modify blogger template using add custom CSS

If you google most of people try to change HTML page of the blogger by editing the HTML page and you don't have to do it any more if you know how CSS works. There is a new feature called Add CSS.
In Template -> Customize ->Advanced ->Add CSS you can customize your CSS to override the current CSS of your current template. If you want to remove the top navbar and bottom footer-3 you target the ID enter as below, if you want to expanse the background to cover the whole page target on body and body class as below. Similar when you write code in Java/C++ you can override functions of the abstract base class. It is a bit complicate to find out the target id and class you need to use the tools: firebug or web developer. You can also look at by view source of your blogger in the browser or paste into Dreamweaver to figure out those id and class for the particular CSS that needed to change. When enter into add custom CSS you can see your blog changes right away if it is correct id or class. It likes a debug monitor.
To add permanent to the blog don't forget to apply by clicking "Apply to Blog."  This feature makes the blog as you want just changing the CSS style sheet. To change the HTML page is not a good choice unless you have to because you need to remember where those changes in a long HTML code page and sometimes it is confusing and complicated. With CSS you need to remember ID and class that need to change. In both cases you will need to know where the id or class have to be changed whether in HTML or CSS. In case of the template is changed in the future you just paste the CSS lines into Add Custom CSS then you're done. It is much quicker to add these CSS lines than go to HTML page and do the search then changing the sections of HTML.This is the cleanest way.
The only things that you can change HTML/JavaScript and now with CSS on the blogger. HTML/Javascript goes to Layout Add a Gadget then choose HTML/JavaScript to your blog. Then paste HTML or Javascript into this new gadget.

#footer-3, #navbar-iframe

{

  display: none;

}



body {

    -o-background-size: cover;

    background-size: cover;

}

.body-fauxcolumn-outer .cap-top {

    display:none;

}

Note:
# is ID, body is for element called in HTML .body for class body, target more then 1 element need to have comma between in the case  #footer-3, #navbar-iframe here we target 2 IDs: #footer and #navbar to display none. Only 3 lines of code to remove top va bottom of blogger. That is the magic of CSS.

 Read more >>   Options >>