Hiding Footer, Navigation Bar, Logo - Customizing Blogpost

Sometimes you want greater control over a ready made template in blogspot for personal choice. Here's a compiled tip how you could customize and override it by using the power of CSS. There are some other non CSS hack like commenting out some code but sometimes it becomes non-workable so I've choosen only CSS technique as it seamlessly work across different browsers.

Before you go any further,  it's best to copy and paste your blogspot html in a notepad editor, this is to avoid accidental messing of template/html, in my case I use notepad++, then do the code change from there, and copy/paste the entire content from notepad back to blogspot html editor.

Edit your blog HTML (under template, click edit template/html) and insert the following line of code on the template, just right above this excerpt of code "/* Variable definitions ... "



Hide the navigation bar, add ...

#navbar-iframe {display: none;}

Hide the footer, add ...

#Attribution1 {display:none;}

Hide the subscribe to (Atom) feed link, add ...

.feed-links {display:none;}

And now to customize the URL logo, find the following code

<b:include data="blog" name="all-head-content">

then replace the image URL with your own logo, corresponding to wherever URL it is hosted.

<link href="http://ur.img.com/guides.png" rel="shortcut icon" type="image/png">

don't forget to change the corresponding image type, e.g. image/gif, in this case it's png type.