Your Blogger Header Sucks! Here’s a Complete Guide on How to Customize your Blogger Header!

Blogger Header serves your websites’ built in banner and considered as one of the vital parts of your website. Blogger Header carries your Brand Name or the Name of your Blog. It also serve as the carrier of you website’s identity and the first one to be seen by your visitors when they arrive at your website. The most valuable purpose of Blogger Header is it promotes your website by letting the user know that they arrive at the right page.

Blogger Header, by default displays only the Title of your Blog. Just a plain and simple text. The style merely depends entirely on the Blogger Header’s Template that is currently installed. To get a quick grasp of the Blogger Header we’ll discuss all possible and known tricks on how to edit, customize and tweak your Blogger Header.

Your Header Blogger Sucks Heres a Complete Guide on How to Customize your Blogger Header

You can do anything what you like in your Blogger Header. Many things you can put there to make it more strikingly attractive to you visitors. Through my (this) blog post, we’ll gonna discuss all known tutorial on how to edit or customize your Blogger Header according to what you prefer. We’ll be discussing the following about our Blogger Headers:

In this case, I assume that you’re not that familiar with your Blogger Header and how it works, let’s dig in to our Blogger Header’s codes that controls everything related to our Blogger Header.

Before touching the codes in your Blogger Header, first thing we going to do is to back up our old templates. Unless you’re not using a customized Blogger Template, you don’t have to do this back up thing. You can easily revert back to the templates provided by Blogger. But if not, I highly suggest that you do this whenever you mess around with the codes and have no idea how to fix it.

To do this, go to “TEMPLATES” and at the upper right hand of the screen, you’ll see the “BACK UP/RESTORE” button. Save it anywhere you prefer. Let’s start rocking your Blogger Header!

Hide Blog Title & Description and change it with my Logo or any Image

To hide your Blog Title & Description in your Blogger Header, you need to locate a code. First is you need to log in to your Blogger.com account. When you arrive in your Blogger Dashboard where you can see the list of your Blogs and the 3 buttons, click  on the More Options Button and Select Template.

Hide Blog Title & Description and change it with my Logo or any Image - 1

Click on the button EDIT HTML and PROCEED.

Hide Blog Title & Description and change it with my Logo or any Image - 2

Check the Expand Widget Templates.
Hide Blog Title & Description and change it with my Logo or any Image - 4

To hide the Blog Title in your Blogger Header, look for this line:

#header h1 {

Add the following code before the closing curly braces }

display:none;

To hide the Blog Description in your Blogger Header, look for this line:

#header .description {

Add also the following code before the closing curley braces }

display:none;


Save your template and view it if it’s working. By inserting the “Display: none;” css style in your blogger header style, you are disabling the Blog Title and Blog Description to be hidden.

How To Add Background Image to your Blogger Header

Add a background image in our blogger header, we must open the HTML window. Scroll down or find the CSS style for Blogger Header Wrapper. It is easier to find this by using the find ro CTRL-F and enter the word #header-wrapper.

How To Add Background Image to your Blogger Header - 1

We can see that our Blogger Header Wrapper has a very minimum css style. It only have a width of 960 pixel and supposedly no margins. To add background image to our blogger header, we need to add the following lines after the closing curly braces:

background-image: url('http://bendaggers.com/bloggerheader-background.png');
background-repeat: repeat;

Before saving, change the URL link where your image is located. We should make sure that our Blogger Header background image is not contradicting the colors of our Blogger Title and Description. Basic rules, if our Blogger Header Title is in Light Color, we can go for a Darker background and vice versa. Another reminder, if the Blogger Header Background Image is small, we should put the codes “background-repeat: repeat;” so that the Blogger Header Background Image will be displayed repeatedly and fill the entire Blogger Header (which has a width of 960 pixel). But if your Blogger Header Background Image has a width of 960 pixel, no need to add the css style “background-repeat: repeat;”.

In this part of Blogger Header tutorial, we only put background image to our Blogger Header so that the Blog Title and Description will have a simple background. But what if we want to add our Logo to the blogger header and eventually turns into an image link which leads to the Home page of our blog? And that is why it will lead us to the next tutorial.

How To Add Image to your Blogger Header that turns into a link to the Home Page

To start our tutorial on How To Add Image to your Blogger Header that turns into a link, open the HTML window of your template (where you edit your template). Make sure that you’ve check the EXPAND WIDGET TEMPLATES and look for the line:

All we need to do is to change the “maxwidgets=1” to “maxwidgets=4”. Changing the maxwidget will allow us to add up to FOUR widgets in our header. Don’t forget to save our template! :)

How To Add Image to your Blogger Header that turns into a link to the Home Page - 1

We’re not done yet, we only added widgets/gadget to our blogger header. Our objective is to add an image to our Blogger Header that turns into a link to the Home Page. The next thing we should do is to hide the Blog title and description. I’ve provided the tutorial above, feel free to read it.

Once we hide the Blog Title and Blog Description, we now insert the Blog Image to the Blogger Header but first we should prepare our Image. Take a look at the Blogger header codes below (easily found in your Blogger Template HTML codes).

#header {
margin: 0 0 3.5em -40px;
width: 600px;
height: 6.8em;
}

It simply says that our blogger header is 600 pixel wide. We prefer to have a 600 pixel image to fill the entire header. Once our Blogger Image is ready we are about to insert it in our blogger header. On the left side of your screen you’ll find LAYOUT, click it. At the top portion of, simply click the Add A Gadget Link and it will open the list of Blogger Gadgets.

How To Add Image to your Blogger Header that turns into a link to the Home Page - 2

How To Add Image to your Blogger Header that turns into a link to the Home Page - 4

Select Picture. Configure the Blogger Image that will be displayed in your Blogger header. Enter a unique title for the widget, leave the caption blank and the type in your Home page Link. Save it and you’re almost done.

How To Add Image to your Blogger Header that turns into a link to the Home Page - 3

The next steps will hide the widget title. In our Picture Widget, we named it “Poootang Ina”. Go back to EDIT HTML Window and search for the title of your widget. In our case, we search for “Poootang Ina”.

How To Add Image to your Blogger Header that turns into a link to the Home Page - 5

Found it! It says that it’s under the widget id = Image1. What we need to do is get rid of the title and to do that we need to add the following codes.

#Image1 h2 {display:none;}

Copy and paste the above code before the ]]> View your Blogger website and see if it’s working. Go celebrate!

How to divide or split the Blogger Header Into Two Columns

So we want to divide our Blogger Header into two columns. We have many reasons why we’re doing this. Most common reason is we want to add our Blog Logo together with Google Adsense in our header. This is relatively simple task for us. First, back up our template to avoid messing around with the codes. Now, go to the EDIT HTML window of your blog. Search for the following block of codes. Use CTRL-F to find the #header easily.

How to divide or split the Blogger Header Into Two Columns - 1

In our tutorial, we want to add  two columns in our Blogger Header. The left Blogger header will have a width of 400 pixel while the right Blogger Header will be a 200 pixel wide. We should edit the #header width to 400 pixel. We also need to add the “Float” attribute so that the left and right column will be aligned horizontally. Our left Blogger header code will look like this after our editing.

#header {
background: #ff6 url(http://1.bp.blogspot.com/-CXXCaF3r4-k/T0NfpmAovPI/AAAAAAAAAcc/gGSo6TQ4jrc/s000/header-bg.png) repeat-x 0 0;
margin: 0 0 3.5em -40px;
width: 400px;
float: left;
height: 6.8em;
}

Next is we should add the right blogger header column. From the codes above, insert below it the following block of codes.

#header2 {
float:left;
width:200px;
}

Take note that it really depends on us how we divide our header into two columns.

We need to add a section for header2 in our Blogger Header. Since we’re still in the Template Editor, locate the following block of codes:

Change maxwidgets=’1’ to maxwidgets=’2’ and showaddelement=’no’ to showaddelement=’yes‘.

Now immediately after and immediately before the last


add the codes below:

The last step would be hiding the widget titles which can be attained by adding the following codes below:

#header h2 {display:none;}
#header2 h2 {display:none;}

Paste it after the css style #header. Our Blogger Header is now composed of two column which we can easily add any widget/gadget we like. Select any gadget from the list that caters to your needs. You can now insert Images, Adsense or even url links in your Blogger Header. Preview your work and save if your satisfied.

Basic Blogger Header Attributes

Blogger Header is very open to modification. Though some customization requires a lot of reading and some technical skill, some blogger header customization just requires us to change a little bit of its codes. These blogger header customizations are (but not limited to) adjustment of Blogger Header font styles & size, Blogger Header background and changing the size of (width & height) of Blogger Header. Majority of the free blogger templates provided in some prestigious websites used the following div tags such as #header-wrapper, #header, header h1, #header a, #header .descrpition and others. Those tags which you can easily find in your blogger templates are the keywords you should/must take a look whenever you want to edit your blogger header.

Basic Blogger Header Attributes - 1
Consider the image above as your header, see how each tags are located in your blogger header. You can edit them depending how you want your blogger header will look like. Blogger header css codes below. This might help you on how to edit your blogger header and consider this as your guide. Experiment!

#header-wrapper {
background:$titleBgColor url("http://www.bendaggers.com/images/BloggerHeader.png") no-repeat left top;
margin-top:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}

#header {
background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom;
padding:0 15px 8px;
}

#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}

#header a, #header a:visited {
text-decoration:none;
color: Red;
}

#header a:hover {
color: Blue;
}

#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}

Before I forget, in some blogger header template, you cannot find the exact div tag #header. I encountered on one of my blogger header template that the developer used the #outer-header instead of #header-wrapper. Well, there’s no difference with it. It also carries the same function as the container of the header. I just mention this because you might be confused.

Notice also the attributes #header a, #header a:visited & #header a:hover, this can only be applicable to those blogger headers with only Blog Title. This pretty much controls how your blogger header transform if the users clicks or hover over your blog title. Most common practice is it changes color. You can do anything you want. From picking out different color (mouse hover), underline (simply add the line text-decoration:underline; under #header a:hover { then it will do the rest for you.) or adding up text shadows. I’ll leave that to you.

Where do we go from here?

We’ve most talked about the majority of things you wanna do to your header. From this point, your now able to edit your blogger header with the help of the previous tutorial. Whenever you wanna add up anything in you blogger header, revisit those tutorials and experiment. Remember that do not be afraid to commit mistakes. Back up your template and revert back if something is wrong. If still finding trouble or anything that’s bugging you? Hit me back in the comments section!

Have a good day and Cheers to us!

Filed Under

Bryce Zapanta

is a graphic designer in a small sized printing company. He specializes on drawing caricatures for their client. He also works on the different layouts of greeting cards especially on weddings invitations (his favorite and area of expertise). During weekends, Bryce enjoys to spends his time going out of town and taking pictures of old houses and any wood carvings that fascinates him.

Leave a Reply

Your email address will not be published. Required fields are marked *

2 Responses to Your Blogger Header Sucks! Here’s a Complete Guide on How to Customize your Blogger Header!

  1. Andrew says:

    Why didn’t you post the date when the check actually reached your employer? This is a very crucial part of a loan process – the date when you physically get the check.

    SSS normally approves the loan the same day and generates the check the day after. So SSS processes the loan in 2-3 days. HOWEVER, the SOP is for them to mail the check to your employer. You cannot claim the check personally (unlike in PAGIBIG).

    Process:
    1. SSS processes the loan application (24 hours)
    2. SSS generates the check (right after the loan is approved, 24 hours)
    3. SSS Main Office’s Mailing Department sends the checks, in bulk, to Quezon City Central Post Office (2-3 days)
    4. If your work in Makati, QC CPO will send the checks, in bulk, to Makati Central Post Office. (2-3 days)
    5. Makati CPO will then arrange the delivery through couriers. (2-3 days)
    6. Courier will schedule the delivery to your employer’s office. (3-5 days)
    7. Your HR will then notify you when your check is already in their office.
    8. If you would encash the check, you need to go to a Philippine National Bank branch.
    9. PNB’s procedure is for you to first photocopy the check, before you can go to their tellers.

    SSS -> Post Offices -> courier -> PNB

    If SSS processes salary loans in 2-3 days, the check will be in your hands in 2-3 weeks. If only SSS allow personal claiming of checks, it would be such a breeze. However, SSS doesn’t want to deal with such a transaction: they’re lazy.

  2. Adnan says:

    really useful post,i was searching for it,thanx
    Here is something interesting for YOU