How to Customize Blogger Header (Part 1)

Overview of Blogger Header

For most blogger, the only theme they consider to customize is the Header. Therefore it pays to spend some time to study the HTML codes (CSS codes actually) of the Blogger Header. Once you are familiar with the HTML codes of the Blogger header, you are able to design the Blogger Header of your own.

Okay! Let’s get started…

The most easiest way to study the HTML codes of Blogger is using Dreamweaver. Blogger use a single file for the CSS styles and HTML webpage. However I personally like to use an external CSS style sheet. Therefore I split and copied the Blogger HTML codes into a HTML webpage and an external CSS Stylesheets.

You can click here to download the Blogger dreamweaver source file if you like.

Note:
In this article, I only copied the Header Section of the webpage.

Design View of Blogger Header

Live View of Blogger Header

This Blogger article simply shows what is the Header.

Posted in Blogger Template | Leave a comment

Blogger Minima Template Layout Overview

The Tic Tac Blogger template we created in the first tutorial is not very good for customization. The most easiest Blogger template for customization is the super simple and clean Minima template.

Template Minima is the most basic and simple layout of Blogger. We will use Minima template to do the customization.

1. The Blogger Minima template is selected. Take a look at the blogger website.

2. Study the layout of Minima Template in Customization screen.

3. Let’s combine the above two blogger layouts. Now you should have a better idea of the layout of the Blogger Minima template.

4. Now, we know the layout of the Blogger template. It’s time to start customizing the Blogger template.

Posted in Blogger Template, Webpage Design | 18 Comments

How to Delete a Blogger Blog

Before we start customizing the Blogger template, let’s show how to delete a blog that no longer in use.

1. Go to Blogger under your Google Account.

2. From the Blogger Dashboard, click on the Setting link of the Blog that you wish to delete.

3. The Settings window appear. To delete the blog, click on the Delete blog link under the Basic tag.

4. If you really wish to delete this blog, click on the DELETE THIS BLOG button.

5. The Blogger blog had been deleted.

Posted in Blogger Template, Webpage Design | 13 Comments

How to Hide Navbar of Blogger Blog

In previous article, we modified the theme of navbar of Blogger Blog. If you are still unsatisfied with the result after changing the theme of the navbar, you may consider to hide or remove it. The Blogger navbar can be hidden so far Google can accept that.

1. You are still in the Blogger Layout Tag. Click on the Edit HTML link.

2. Click on the Download Full Template link. Before you edit the HTML codes of blogger, remember to backup the file.

3. Scroll down to find the line as shown:

4. Insert the following single line of code as shown in the diagram below:

#navbar-iframe {height:0px;visibility:hidden;display:none}

5. Click on the SAVE TEMPLATE button to save the changes.

6. Click on the View Blog link to see the blog.

7. Look! the Blogger navbar had gone.

8. Remove or comment the above line of code if you wish to resume the Blogger navbar.

Note: Since the Customization link in the navbar will also be hidden. This is better to use another browser to view the changes of blog. Otherwise you have to navigate back to:

http://www.blogger.com/home

This article shows how to hide or remove the Blogger navbar.

Posted in Blogger Template, Webpage Design | 2 Comments

How to Modify Theme of Navbar of Blogger Blog

The most uncomfortable feature of Blogger should be the blue bar (navbar) on the top of each blog as shown in the diagram below. Most blogger will try to remove this navbar.  There are some ways to remove this navbar. One of the most easier way is to blend the navbar with your blog. This way the navbar seems part of your blog. Let’s see how to do that.

1. Click on the Customize link on the navbar

2. The Layout of Blog appear. Click on the Edit link of the Navbar.

3. The Navbar Configuration screen will appear as shown below. Select the best color theme of the navbar to match your Blog.

4. Click on the SAVE button to save the changes.

This article shows how to modify or change the theme of navbar of Blogger Blog.

Posted in Blogger Template, Webpage Design | 2 Comments