Quick and easy way to add custom header in blogger
In our Blogging Customization topic for today I will share you how quickly and easily we can add a personalize blog header.
If someone would asked me what is the part of the blog or site should I prioritize in customizing a blog or site I would answer without hesitation that it is the HEADER. I do believe that the header is the most significant part of the blog as this will promote the blog’s brand and making it easily acknowledge by reader.
This is the HEAD where the FACE of you blog is nested.. so I’m definitely sure that you would agree to me if I will say that this is the best part of your blog to affix your “personal touch”. Hypnotize your visitor by adding striking header in your blog in quick and easy way that I will share you later. One more thing I would like to add is that make your blog as presentable and as relevant as possible because this is where the FIRST IMPRESSION takes place.
I will assume now that you already have your “striking blog header” that you will put in you blog with correct image size measured in pixel. Using the photoshop or the free tool like the irfanview you can come up with it in a matter of minute. Just rely in your creativity and experiment experiment with the hue-saturation and color.. 
In our process I’m going to use the header of my friend buddy of the buddy-dubaibase.blogspot.com who I think needs this tip to solve arrange his header image accordingly. With this I can help my buddy solve his header problem and provide you a quick tip to quickly do it. Two birds in one bullet- huh..?
By the way buddy’s blog contains loads of tips and tutorials about photography, from choosing the right camera up to the secret of professional photographer how they get a nice looking great shot so don’t forget to visit his blog if you love photography or just want to know something about this profession… OKeis..
Now lets proceed:
Below is the snapshot of the header of our friend, as you will notice with his rounder template he is obviously having problem on centering the image and the description – “dubaibase” was repeated twice in his blog header which is appears redundant in my opinion. Let’s help our friend solve this problem so that his blog will look more presentable and hopefully benefit our readers to who are asking question how to add and center the header image in blogger.
1.) Log-in using your blogger account.
2.) On the blogger dashboard, click the “layout” of the blog where you want to add you customize header.
3.) Under the template tab, click the “page elements“. You will now see the window where the page elements of your blog is loaded. The navbar, the header, the blog post sidebar and others. In this window you can edit, add page element, add widget.. or re-arrange your blog layout in whatever you want. Now click the “edit” of the Header page element.
4.) The configure header box will pop up in new window. In this dialog box, you can edit the Blog title or even add your blog description. You can also see the image option right under the blog description box. Click the browse if your header image is in your local drive or encode the header image url if you uploaded it in any of your image server online.
The header image size is relevant to fit in your alloted header space so please take note. In this tutorial I’m going to use the 750×170 pixel dubaibase header image which I uploaded at photobucket
Image url on this example: http://i166.photobucket.com/albums/u90/lestat_m/dubaibase2.png
Once the image is loaded you will see the preview of your header. DON’T CLICK the save changes yet!. We must first decide the header image placement first, and this selection will have a different effect in placement of your header image. Lets deal with it separately
If your header image doesn’t contain text you may tick the “behind title and description“, in this way your image will serve as a background header and the word that you encode in “blog title” and ” blog description “will appear in the header.
Click the “save changes” then select preview your blog. It will look like the screen shot below. The header image is aligned properly with the “blog title” as specified in the configuration header dialog box but there is a 8 pixel space on top of the image. If this gap is OK with you you can stop here, otherwise you can proceed to the next step to get rid of the space.
a) To remove the 8pixel gap on top of our header image, go to “edit html” and change the code as shown below, “green characters” are those that needs modification.
#header-wrapper {
background: #476 url(“http://www.blogblog.com/rounders4/corners_cap_top.gif”) no-repeat left top;
margin:22px 0 0 0;
padding:0px 0 0 0;
color:$titleTextColor;
}
#header-inner {
background:url(“http://www.blogblog.com/rounders4/bg_hdr_bot.jpg”) no-repeat left top;
padding:0 15px 0px;
}
b) Save Template and your done..
Now in case 2 where blog title and description is already part of the blog image, tick the “instead of title & description“. Click save changes. The screen shot you can see below, something is wrong isn’t it? the image is not centered.. Following is the step you will do to solve this problem.
a) To center the image header , go to “edit html” and change the code as shown below, “green characters” are those that needs modification.
#header-wrapper {
background: #476 url(“http://www.blogblog.com/rounders4/corners_cap_top.gif”) no-repeat left top;
margin:22px 0 0 0;
padding:0px 0 0 0;
color:$titleTextColor;
}
#header-inner {
background:url(“http://www.blogblog.com/rounders4/bg_hdr_bot.jpg”) no-repeat left bottom;
padding:0 0px 0px;
}
b) Preview your blog, if everything is done correctly your image header will be centered. Save Template and you are done!.
To add some twist I prepared another sample header with the rounded corner, this image warp to the body post so that it looks like part of other page elements. Here are the links:
5.) And finally,Don’t forget to SUBSCRIBE TO OUR BLOG so you’ll be updated whenever we post useful blogger hacks, tweaks and tips
You might want to check also other blogging customization here. Next post will be about Post Summary or the “read more here” or the “continue reading here“ that you see in most of the blog. Stay tuned and hope this little information of mine helps.
Liked this article? Keep up to date by SUBSCRIBING OUR FEED
Have something in your mind? share with us & leave your comment
Don’t hesitate to drop an e-mail if you know any article that can be featured here.
For future reference right click here to bookmark this page
********************************************************************
Like this post & want more? Join our growing list of readers and allow us to deliver our blog updates directly in your inbox.
thanks for this post and i love your blog
[Reply]