Pages

Beginner's Guide to Customize Blogger Header

What We'll Do?


Our objective is to change the outlook of our header as well as play with the header widget itself.

The Default Code


In your Blogger CSS, the header is defined by the following piece of code:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Understanding the Default Code


-> #header-wrapper describes overall look of your header.

-> #header will describe the overall look of your blog title and description.

-> #header h1 specifically describes your blog title.

-> #header .description will be responsible for the description of your blog.

-> #header img will become affective if you're using an image as your blog title.

Understood the Default Code? Start Making it Tasty!


I'm changing the overall look of header by making modifications in #header-wrapper.

-> To change the width of your header increase the value of width in #header-wrapper from 660px to a higher number i.e. 750px and see the preview.

-> To add color in the background, you can add background-color:#000000; in #header-wrapper. Please note that #000000 is hex code of black color, you can change it with your desirable code. To easily capture colors on web or on your computer, please download a free program ColorPic from here.

-> Our header border is a thin solid line and it is defined by border:1px solid $bordercolor; in #header-wrapper. If you want to change the thickness of your border, change 1px to 2px and preview. You can also create a dotted line border by replacing solid with dotted. Last thing you can do is to change color of your border, you need to replace $bordercolor with #FF0000. Please note that #FF0000 is the hex code for Red color.

Now I'll try to change the appearance of blog title.


-> The blog title is defined by #header h1.

-> Currently the line-height is 1.2em, change it to 1.5em and you'll see that the space occupied by blog title has increased. Please note that this setting will not affect the font size.

-> Now lets try to change the size of the font. We need to add a new tag in #header h1 which is font-size:15px; and then see the preview, if font size is small increase the 15px otherwise decrease it.

-> To change the font of your blog title, you need to replace font: $pagetitlefont; with font-family: arial, "lucida console", sans-serif; now your blog title will appear in Arial font. I'm adding 3 fonts because your visitor might not have Arial font available on his/her computer then 2nd font can be used.

-> By default, your blog title will appear in uppercase because of text-transform:uppercase; property. Change uppercase to lowercase and then the title will become lowercase. If you don't want both uppercase or lowercase, you can remove text-transform:uppercase;.

-> Last property is letter-spacing:.2em; it defines the spacing between two alphabets. You can increase it (.3em, .4em, .5em) or simply remove it and see the preview.

Add more widgets around header in 'page elements' section.


By default, you can't add any widget around your header because there's no "Add a Gadget" option beneath or above your header. So, lets add that option by ourself.

The default header widget code in 'edit html' section.


First of all we must know the default code, only then we can play with it. If you'll go to "Edit HTML" tab and search for <body> you'll find some code like this some lines after <body> tag...

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger FAQs | Premium Blogger Templates, Tutorials, Hacks, Tips &amp;amp; Tricks. (Header)' type='Header'/>
</b:section>
</div>

Change the header widget code.


All we need to do is to change the value of 'maxwidgets' from '1' to '3' and 'showaddelement' from 'no' to 'yes' and now the code should look something like this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger FAQs | Premium Blogger Templates, Tutorials, Hacks, Tips &amp;amp; Tricks. (Header)' type='Header'/>
</b:section>
</div>


What I've done is that I've increased the maximum number of widgets that can be installed around our header (maxwidgets='3') and I've also made the option of "Add a Widget" available in your header (showaddelement='yes') you need to save the template here and go to the "Page Elements" section to see the results.

Why it is good to have more widgets around header?


This is an obvious question and the answer is very simple. Your header is the first area where an incoming visitor will look so you can have an Adsense ad, a search engine, a translator or any other important widget in your header.

22 comments:

  1. Hi, I'm trying to change the spacing of my header, as I have a picture from my laptop which starts qite far right and continues much further out than the rest of my blog. Is there any way to align the header to the left? Thanks Charly

    ReplyDelete
  2. @ Charly, I've just checked your blog and I think whole of your layout is aligned right. Please send me your layout (.XML) by mail.

    To download the .XML file of your template, go to "Layout" tab then "Edit HTML" and click "Download Full Template" link. An .XML file will be downloaded to your computer, just mail me that file at the email given at the footer of this page.

    ReplyDelete
  3. Thank you very much for your help, but i managed to play around with the html and sort it out! Thanks Charly

    ReplyDelete
  4. I added a header below my picture header where my blog title is located. But I want to change the color of the titles (About, Recipes) without having having the same color as the link color. How do you do that?

    ReplyDelete
  5. Hi, it is very good tutorial. Thank you so much!

    ReplyDelete
  6. @ Divina Pe, I've just checked your blog and you've added those links in a widget. I can't write a full tutorial for that so I'd request you to send me your layout (Go to "Edit HTML" click "Download Full Template"). Also tell me which colors you want to apply on those links and what should be the mouse-over colors.

    ReplyDelete
  7. HI Bilal, I'm trying to click your contact but I couldn't enter. I wanted to send you my template. The color is simple. The top links would be black and the mouse-over colors would be grey. I actually wanted to do a navigational bar but I guess that is quite complicated for a post. Or at least have some borders around the the post and in between. Do you have a tutorial about how to make a 3 column? The main column on the left and two side columns on the right? Thanks Bilal.

    ReplyDelete
  8. @ Divina Pe, I haven't yet created a Contact page but you can just send me an email.

    levisinside0@gmail.com

    ReplyDelete
  9. Hi, I am using your template Piano Black. But there are a few adjustments I would like to make. (I am quite unfamiliar with code and all that.) I don't understant how to get ride of Post Rss, and change it for a page on the blog where I'll post a map. Also, I want the rss link next to the search box to work, as on the demo. For now, it is not clicable, and it does not seem to have a link attached to it. How do I do it, and where do I get the link for the Rss to work.
    Many Thanks. You can reach me at pressingparisien at gmail dot com

    ReplyDelete
  10. @ Pressing Parisien, I've recently created a video tutorial to change the menu links, see it and you'll get an idea to customize menu links:

    http://www.youtube.com/watch?v=S77cF3I_Smk

    Currently, the RSS button is pointing to this address on your blog, I've just checked that!

    http://pressingparisien.blogspot.com/feeds/posts/default

    You can also change that after watching the video tutorial above although here is the code for RSS link which you can change:

    <a href='http://pressingparisien.blogspot.com/feeds/posts/default' id='rss-feed' title='Entries RSS'>RSS FEED</a>

    If you need any help, feel free to ask again, thanks :)

    ReplyDelete
  11. Wonderful tutorial. Thank you very much for such a quick answer. You are right the rss button works.

    Pressing Parisien

    ReplyDelete
  12. My turn for a question! I figured out how to center my blog's title horizontally, but what about vertically? I found a great header image, but the space left for the title and description is too low for where my words are.

    ReplyDelete
    Replies
    1. Hi Shelver 506, please send me your template file and that image:

      levisinside0@gmail.com

      Delete
  13. Thanks a lot Bilal.. It helped me a lot ..:)
    I am following you dear :)

    ReplyDelete
    Replies
    1. Hi Neisha, thanks for the kind comments. I'd really appreciate if you could link back to this blog :)

      Delete
  14. Great ! Thank you for spending time to work out this guide.

    ReplyDelete
  15. Hi I would like to have an image right across top of my blog page . We are using the header provided in the template and using a photo from my P.C but for some reason the photo will only cover half the header. I want it to look like a banner. I'm new to blogger but have learned how to access some HTML codes and change some widgets but I am stuck with this one can't figure it out. Can you help me to do this? I would be very gratefulthankyou, carol

    ReplyDelete
  16. Hi there, this is all great information, but mostly greek to me! I found a site that told me how to center my header. I have changed my header and want to move it around some. the last photo in the header is cut in half. I am having a very hard time figuring this out. can you please help me? thanks so much.
    Cynthia at http://FeedingBig.com
    HomeMatters1st@yahoo.com

    ReplyDelete
    Replies
    1. Hi Cynthia, I've sent you an email. Please check your inbox (or junk/spam folder) for my message.

      Delete
  17. hi, I am trying to get my header image to expand the width of the page. and to move up a little!! here is my site: http://loveeartha.blogspot.com
    I would appreciate any help! thanks so so much :)

    ReplyDelete
    Replies
    1. Hi Samantha, this would require some changes in your template code. You can contact me by email for custom service.

      levisinside0@gmail.com

      Bilal

      Delete