After reading through the earlier posts on the Templates (Post I and Post II) you might be thinking to make some modifications to your existing template. Well after this post you can change the Header of your blog and also get rid of that NavBar that Google provides at the top.

But before that, we need to move into understanding CSS. CSS is an acronym for Cascading Style Sheets and, as the name indicates, is responsible for styling out the sheet or the HTML for the page that you see in the browser. This was introduced to make keep HTML simple and make the formatting aspects of websites easier.

I will be modifying a blog - "HTML, CSS and SEO Explained" during the course of this tutorial. You would find that this blog still has the Rounders template and by the end of this tutorial the theme would be modified to make it look a different theme altogether.

Now, after you have some basic understanding of the terms used in CSS, what is required now is to have some idea of what we are going to do. As I mentioned in the last post and even at the start of this one, the first thing that we would do is to get rid of the Traditional Header Background that the template provides me.

Changing the Header Image

Well, Blogspot provides quite a simple method to do this -

1. Log in to the backend of your blog
2. Go to the Layout and select the Page Elements tab
3. Click on the Section that displays the heading text for your blog. This will display the Configure Header Window where you can easily specify the image that you need.
4. You can also select whether current text on the Header of your blog will be displayed or not when this image is shown.
5. Once you have made your selections click Save button and voila the heading is changed.

The NavBar

Now that you have changed the header you would like to get rid of that NavBar that blogspot displays at the top of the blog page. But before you turn it off there are a few things that you must make a note of. The NavBar contains some essential tools and functionalities -

1. The Search Box - This provides the capability to search in your blog and is a really worthy function. If we remove this link, we would have to allow the visitors some place to do with their search. Blogspot has a gadget that will allow the visitor, or anyone, perform a search. So we can get rid of this functionality here.

2. The Sign-in Link - This allows you to log into Google services and also the blog (if you are the owner of the blog). If we remove this link, we can still logon to blogspot from their URL http://www.blogspot.com. Alternatively, we can place a Login link in one of the gadgets that we can add. So removing this feature will not affect the visitors.

3. The Customize Link - This link is to take us to the backend of the blog directly to the Layout section. If we remove this option, we can still get to the back-end after we log in to the blogspot. So removing this feature will not affect the visitors.

4. The Follow Link - This link allows someone to follow our blog. Alternatively we can setup the Follow Gadget. So removing this link also doesn't affect visitors much.

5. The Share Link - This link allows sharing of the blog into twitter, facebook and Google Reader. If we remove this link, we can add up the share gadget and the functionality remains the same.

6. The Report Abuse Link - I would never want anyone visiting my blog to use this option. So I do not need it. What about you? I think you would want to get rid of that too!

7. The Next Blog Link - This is a link that will take the visitor to a randomly selected blog away from my blog. So I don’t want to use it. I think you too would agree.

8. The Sign-out Link - Clicking this link logs me out of the Google Services. If you are mostly working on public computers you would not like to get rid of this option. So the alternate is to place this link in one of the gadgets. Remember we can use the same gadget for Login and Logout links.

Requirements if NavBar Is Removed

Now that we have understood the functionality of the NavBar, we have the following needs that we plan to have on the blog -
a. Login / Sign-in Link
b. Logout/ Sign-out Link
c. Follow Gadget - if not already on the blog
d. Search Gadget

Adding the Gadgets

Sign-in and Sign-out Links
Move the mouse pointer over to the Sign-Out link on the NavBar. Right Click and select Copy (IE) or Copy Link Location (Mozilla, Firefox)

1. Move to the Page Elements section in the Layout of the backend of your blog.
2. Click Add Gadget in any area where you want the links to be.
3. Add the HTML/JavaScript Gadget.
4. The Code Editor opens
To add the Sign-In link
5. Type the following code
<a href="http://www.blogspot.com/">Sign-in</a>
6. To add the Sign-Out link
<a href="PasteTheCopiedCode">Sign-out</a>
Replace the PasteTheCopiedCode with the content that got copied earlier

Once done, you can add the Gadgets for Follow and Search.

With all this information, we can now remove the NavBar. So get to the HTML Editor in the backend of your blog and move to the line just before.

Place the following code above that line
#navbar, #navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

Click Preview button below the editor and confirm that the NavBar is removed. Now you can save the template.

---

In case you have missed out find my eariler posts here - Part I, Part II.

---

In the post on Monday I would be telling you how to add images before the Post Title, Date of Posts and Other things to add glamour to your blog. Till then happy experimenting and learning.