February 28, 2012

How to Customize Your Header in Blogger




Do you have a blog header on your blog? Does that question sounds funny? Yeah... sort of. I bet you have a header on your blog too. Generally almost all blogs have their own unique header to show off blog title, description or simply to convey the idea behind the blog.

In Blogger, you just don't worry about implementing header as it is included right when you create your blog. Basically your blog header will consist of your blog title specified when you create your blog. But it may not the way you wanna set up your blog header. So what if you wanna go beyond and customize your standard Blogger header?

Blogger doesn't restrict you from customizing header and it offers few prominent options to customize yours. By default, once after creating your blog, you will see only blog title on your header. If you are not prefer to keep it as it is, Blogger let you customize your header in these ways.

Show blog title and description on header

Show blog title with background header image

Show blog title and description with background header image

Add an image as header

Show header image with blog description

I got few more queries recently asking how to create headers or customize them. Yeah, it seems much easy for most users. But I see some novices couldn't figure it out at all and confused. So I'd like to contribute them via this post to style their blog header. So if you are wondering about customizing your Blogger header, here you will find how to customize your standard Blogger header with available options.


Before You Go:

* If you wanna add a custom header to your blog, read How to Add a Custom Header in Blogger.

* If you are looking for adding a header image for you blog using dynamic views, read How to Add a Header Image for Dynamic Views in Blogger.


Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Layout tab.


4. Now find the Header element just below Favicon element.


5. Click Edit link correspond to your header element.

6. Now you will see the configuration window of your header. Either you can display your blog title and description on header or specify a custom image which is suitable to use as your header. Or you can use mix of them. See what's best suite for you and follow relevant instructions.


Show Blog Title and Description


Just enter values for Blog Title and Blog Description fields.

Note: If you just wanna show only your blog title, leave Blog Description field as blank.


Show Blog Title and Description with Background Header Image


i. Make sure you have entered values for Blog Title and Blog Description fields.

Note: If you just wanna show only your blog title, leave Blog Description field as blank.

ii. Now upload your image from your computer or from web by specifying image URL in relevant field.

Note: If you believe your image is much wider than your blog width, you can select Shrink to fit option before upload or specify image URL, to shrink image and adjust automatically for header.

iii. Now select Behind title and description option under Placement.


Add an Image as Header


i. Upload your image from your computer or from web by specifying image URL in relevant field.

Note: If you believe your image is much wider than your blog width, you can select Shrink to fit option before upload or specify image URL, to shrink image and adjust automatically for header.

ii. Now select Instead of title and description option under Placement.


Add Header Image and Place Blog Description Beneath the Image


i. Upload your image from your computer or from web by specifying image URL in relevant field.

Note: If you believe your image is much wider than your blog width, you can select Shrink to fit option before upload or specify image URL, to shrink image and adjust automatically for header.

ii. Now select Have description placed after the image option under Placement.


7. Now save your header element.

8. Preview your blog and see how it goes.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Lina Bukhari said...

That was great! Thank you!! But I have one question, how can i make my blog Posts column or whatever its called transparent ? So the blog's background can be seen through it? Xx

Mayura De Silva said...

Hi Lina,

You can transparent your background color so your background image or color can be seen. Read How to Change Your Blogger Background Image and Color and set Main Background color as Transparent. You can find more option there too. Hope it helps :)

Thanks for your compliments too Lina :)

Cheers...

Loulou said...

How can I make my original template be shown when my blog is viewed with a mobile device? Because its not the same! Merci :)

Mayura De Silva said...

Hi Loulou,

You may have enabled mobile templates for your blog mate. That's why it's different from your original one when view through mobile. However you can disable or use Custom option at "Template" tab. If you are not familiar, read How to Enable Mobile Version of Your Blog in Blogger and use custom option or just disable it.

However if you have widgets and all your blog may not display with Custom option. You can set it and see yourself through your mobile. If it's messing up, just disable mobile template and visitors will see your original site when they view your blog via mobile.

Cheers...

Lilly-1 said...

I need some help please..

I want to blog as an annonymously, so how can I make my name hidden at the end of the post? So it doesn't look like posted by :( I really need it thank u

Mayura De Silva said...

Hi Lilly,

You can refer ~ Customize Post Footer in Blogger. Refer "Add/Remove Basic Post Footer Options" heading and there you can find option to remove author name from post footer.If you have more questions on that, drop your questions below that post :)

Cheers...

Chathu Perera said...

I followed your instructions. But it didn't show my header image. And only show my blog title and description in one line :(

Mayura De Silva said...

Hi Chathu,


What option did you use when setting your header image? :)


Cheers...

Chathu Perera said...

Show Blog Title and Description with Background Header Image option. But it displayed only blog title and description, but not the image dear.

Mayura De Silva said...

When you upload your image, does it show preview of your header image you have uploaded there dear? :)

Blogzy said...

mine did and I am having the same problem
~Kate

Mayura De Silva said...

Hi Kate,


What happens when you upload your header image? Do you see any preview? :)


Cheers...

kel said...

hi i have a query here. i embeded an image file to be used as my header. The problem is, when I search my web name on Google search, the display name is comes with the word of header, e.g. kellygraphee header
my site is: kellygraphee.com
can u help me pls? thx.

Mayura De Silva said...

Hi Kelly,

Is it happening for long time? :) I just visit your blog and you don't need to worry about your header or coding there. Google couldn't identify your blog title properly and next time when Google crawls your blog, it will be corrected.

Anyway submit your blog URL to Google manually to re-crawl your blog as quickly as possible. You can find information here if you need to ~ How to Submit Your Website to Search Engines.



Cheers...

kel said...

Hi Mayura,
It just happened recently when I "revamp" my site.
Thanks for your time & prompt help! Appreciate you taught me new thing at the same time, i will definitely try it out soon. Thx. ;))
kel

Mayura De Silva said...

Hi Kelly,


Well, it's not permanent :) You just have to notify Google about it dear. Then it will show off your real blog title.


You're welcome and we all learn everyday, nah? :)


Cheers...

Jun Aguelo said...

How to stretch the "Image header"?

Mayura De Silva said...

Hi Jun,

Well, there is no stretch option but you can shrink header image :) However you need to use an image comply with your header size and background color.



Cheers...

Will W said...

Hey Mayura,

thanks for this article it was helpful! But I have a problem. When I add a background image to my dynamic view blog page, it also covers the header. Is there any CSS code I can use to keep the header white with the picture covering the page background below?

Kind Regards,

Will

Mayura De Silva said...

Hi Will,



Can you mention your blog URL? So I can check it out what's exactly happening over there to provide CSS code or suitable suggestion mate :)


Thanks for your compliments Will :)


Cheers...

Will W said...

Hi again,

I've just found that it seems to be a bug in the template editing system. I can override the image covering the header by using the following code I found off from an Indian programmer:

/*Subin's Blog*/.header-bar{background-image:url('YOUR IMAGE URL') !important;}

So I could then make a PNG under 1kb @ 1 X 65 px and then just allow it to be repeated, in the desired colour.

I wish you all the best with your blog, you're doing a great job!


Will

Mayura De Silva said...

Hi Will,


Cool mate :) Glad you figured it out and if anyone got into trouble like yours will find this helpful.


Thanks for taking time to share the solution and for your compliments too mate :)



Cheers...

Dilek Turan said...

Hello, is this technique really working for dynamic view as well? I've been trying both this and adding custom css in vain. Nothing works. All I can see is the blog title above. If anyone has any idea or solution on this, please pass it through.

Mayura De Silva said...

Hi Dilek,


Ohw no dear :) You need to follow another route for that.

On the Template tab find Customize button and there you can add a background for your blog at Backgrounds pane. Just upload image with 65 pixels height and it will set as your header image.


Hope it helps :) Let me know if you need more help there.


Thanks for coming up with this question and I need to come up with a post now :)


Cheers...

Dilek Turan said...

I tried that as well (no tiles, no scroll), but the blog title stays there and there seems no way of getting rid of it. The problem is my Header image must replace the title as it's a text with a custom font (same text with the title) over black bg. I suppose it's not possible. :)

Mayura De Silva said...

Ah now I get it :) For that matter, follow same steps above and jump to Advanced pane. There you can find Add CSS and paste below code there and apply :)

.header-bar {
display: none !important;
}

Cheers...

Brijesh Tejani said...

Hello, I have been trying these steps from the last three days but, the changes just don't show up! I don't what's the problem with blogger! And the templates even when edited and saved don't change. (It just remains the same!) What should I do now? What do you think is the problem? Please reply asap. I am publishing my blog tomorrow!
Regards,
Mr. B

Mayura De Silva said...

Hi Brijesh,

Did you edit your template code lately? It may happen if your template code has been modified or using a custom template.

However you can try out reverting widget templates option there. But first of all, have a backup of your template.

Hope it helps :)


Cheers...

BrijeshTejani said...

Nope, it didn't help. What should I do now. I really want that header image up there. It's gonna have my logo!!

Mayura De Silva said...

Next option would be changing or re-applying your template again for your blog mate. Can you try that? Make sure backup is ready before that.

BrijeshTejani said...

I have already tried doing that a thousand times!! My current template is the Dynamic View (default) template. The other templates which I don't want show the changes when edited. But this one DOESN'T!! I have even tried customizing the template a lot of times, but the changes just don't show up. The "Apply to Blog" button, it seems to me, doesn't work!

Mayura De Silva said...

Oh.. you should have told me that mate :)

This tutorial is not for Dynamic Views. You should read the post carefully before step on to steps directly. You can find the link for adding header for Dynamic Views in "Before You Go" section.

Cheers...

BrijeshTejani said...

Lol. It worked but again, the "apply" button just doesn't seem to respond to my efforts. The changes can't be saved and can't be seen!! :-(

Mayura De Silva said...

Can you apply a background image over there without uploading a custom image? It works?

BrijeshTejani said...

Yes, and all of that shows in the preview, but doesn't get saved!

Mayura De Silva said...

Is it same if you use another Dynamic view and apply image again?

BrijeshTejani said...

Yes, that happens in all the Dynamic templates. But, it shows the changes perfectly in the rest of the templates. The apply button also works well. Now, I think I will have to give up my obsession for this "Dynamic" template and go ahead with some other template! :|

Mayura De Silva said...

That's strange. You can try posting this issue on Blogger Help Forum to get help specifically for your blog. I hope they will fix it for you :)

Cheers...

BrijeshTejani said...

Yes it is. I will do that, but I don't think I have that much time right now. I am going online tomorrow! So, I'll settle for some other template as of now.

Mayura De Silva said...

That's better as you wanna publish your blog on Jan 1st which is few hours to go :)

However report your problem there too, so you may able to hear from someone soon with a fix. Who knows, may be in few minutes.

All the best for yours :)

Cheers...

BrijeshTejani said...

Thanks so much Mayura. Cheers.

PJC said...

Is there a way to have the image and the Title? Everytime I add an image, it replaces the title. Seems to be the only option not available.

Mayura De Silva said...

Hi PCJ,


As mentioned in the post, you can show title with an background image :) Did you try that option?


Cheers...

Mayura De Silva said...

Hi Linah,

Well, it does mean that the blog address you have been trying to use is already using right now :) You can't get an address that already in use but can try another one similar to that.

The blog address is depends on how you would like to address it. So I can't really suggests you what to use but it's your choice :)

Anyway you can append a word that makes sense such as "mademoiselleslinah" or so :)


Hope it helps and thanks for your compliments :)

Cheers...

Linah said...

Thanks! Do you think adding a number would make it difficult for people to visit? Like mademoiselles8.blogspot.com or something?

Mayura De Silva said...

Mmm... It wouldn't make it hard for people to visit as mostly they click on the link instead of typing it all in the addres bar :) But if your blog address is easy to pronounce, then it's easy for you to spell out. That's why I just suggested a name like "MademoisellesLinah" earlier.

However try numbers as the last option as sometimes using numbers just doesn't feel alright :) You can use mademoiselles1, mademoiselles2 or so, but it's like just another random name. Anyway if you have a specific reason to use 8 at the end of word mademoiselles, then it's perfectly alright :) As I said, it's your choice.

Cheers...

Serena said...

Can I have a custom background if my template s simple? Thanks

Mayura De Silva said...

Hi Serena,

Yeah, you can change your background easily there through Template Designer. If you don't know how to, you can read here ~ How to Change Your Blogger Background Image and Colors.

Cheers...

Sophie said...

Hi, my template is dynamic views. The problem is, I just wanted to add the "polls" gadget but the question won't show up on my blog, I mean the answers only show up.. What to do? :( thanks!

Mayura De Silva said...

Hi Sophie,

You might wanna change some colors on your template :) Take a look here ~ How to Change Your Blogger Background Image and Colors and try changing colors on your template.

If you have more questions, comment below the post there :)

Cheers...

Sophie said...

It's still the same.. I've checked and all the colors are perfectly fine.. Does it have to do with the location of. The gadget though? Because its right below the header

Mayura De Silva said...

Can you drop me your blog URL? :) I might able to get better idea that way.

Cheers...

Lina said...

Hi there, how can I change voting box color and the "vote" font color on the polls gadget in my blog.. They're green according to my template.. And I couldn't change them in advanced options. Thank you!

Lina said...

Also, how can I make this space between the blog title and the blog posts white too? Thanks again!

Mayura De Silva said...

Hi Lina,


Are you using Blogger Poll gadget? It doesn't has advanced options to change colors though.

If you have more questions on that, use Support section :)

Cheers...

Mayura De Silva said...

Hi Lina,


Try changing main background color to white on your blog. If you don't know where to change colors, read How to Customize Fonts and Colors in Your Blogger and comment there if you have more questions.


Cheers...

Vicky Stokell said...

Hi!
I was trying to edit how the mobile version of my blog appears but seem to have wiped the colour scheme and background? Please would you know how I get it back?
Many thanks
Vicky

Mayura De Silva said...

Hi Vicky,

When it comes to Blogger, the customization on mobile template is very limited.


Did you try to change the mobile template or edit your blog template?



Cheers...

BudgetVideo4BIZ said...

I would like to know how to set the URL for my custom header, so visitors can click and be redirected to my main website.

Mayura De Silva said...

Hi Mate,


As you have followed the tutorial here, whenever they click on your header image, they will be redirected to your homepage.


Cheers...

BudgetVideo4BIZ said...

Mayura, It is redirecting them to my BLOGGER home page [which is usually where they already are when they are visiting that Blog site :-)]. I wanted to figure out how to redirect them to my web page - outside of blogger. any tips for that edit/change?

Mayura De Silva said...

Oops... Well that's not a good practice to follow :) Anyway you can implement a custom header and enclose header image tag with a link to your website.

You can find here how to create a custom header ~ How to Add a Custom Header in Blogger



Cheers...

BudgetVideo4BIZ said...

Wow, Mayura, you are exceptionally responsive and helpful!

THANX.

First, why is linking the header to my home web page not a good practice?

Secondly, my html code skills are very elementary; can you possibly provide a screen print of an example of your suggested, "implement a custom header and enclose header image tag with a link to your website." I would appreciate it. Thank you in advance for your prompt replies to allow me to get this "mini-project" completed today.

Mayura De Silva said...

The header is intended to redirect readers to the homepage of the blog and retain them more time on the blog :) I don't know your reason, but hope it's a good one.

Also as users not familiar with that practice, they might be confused and think it may redirecting to a spammy or sales page. Once they get to know, they will not click on header anymore.

It's just possibilities I'm talking about. You can implement and see how it works for you :)

You have to follow the tutorial I've suggested and add a HTML/JavaScript element as the header. Below is example code you can use there,






Insert following URLs in there respectively ~ (i) Website URL and (ii) Image URL


If you have more questions on custom header, comment under that post mate :)


Cheers...

dawn said...

How can I get my header image to stretch across my blog? When I'm in the template, it appears as it would stretch across the blog but it goes part way. http://quiltingbydawn.blogspot.com

Mayura De Silva said...

Hi Dawn,


Unfortunately you can't stretch your header image but shrink. Use a header image with the width 868 pixels and it will fit to your header :)


Cheers...

Lhaki woezer said...

Hi there, I really need your help. I dont know what is wrong but everytime i change my header picture I cant view my blog. It appears with a broken "e" on blogger(the logo) but when i remove the picture I can view it. The error code it showed was bX-F5c2il.

Claris said...

I have a question about this subject maybe you can help me!

If I put an image as my header over the title and description, those two will still be indexed ?

For example, if someone find me on Google it will still be able to see my blog name and description even though when they enter on my blog will see just an image as header ?

Mayura De Silva said...

Hi Claris,

Sorry for replying late, as I was away from the blog :)

Of course mate :) It doesn't matter if your blog title is hidden on the header. Still Google will index your title.

But when it comes to description, Blogger has another option for you to add your description mate. Read How to Add Search Description for Your Blog in Blogger and add your description there.

Cheers...

Mayura De Silva said...

Hi Lhaki,

Seems it's a technical issues persists on your blog mate. But I'm not sure exactly.

Yet if it's happening on your blog, go to Blogger Product Forum and report your problem in Something is Broken category.



You will get assistance and a representative will report your problem to the developers to fix it.


Cheers...

Sara said...

omg.. this is great! i had no idea i could do that with my blogger blog account..and i been wanting too! So easy, wow! Now i can digi scrap book something according to my blogs as what the themes are and upload it to make it more lively!


thank you! thank you!

Mayura De Silva said...

Hi Sara,


You're welcome and glad you found it helpful to your blog dear :) You can have a customized header as you like and it adds more color for sure.

Thanks for coming by and sharing your thoughts on customizing header :)


Cheers...

Mayura De Silva said...

Hi Gokce,


I've followed to your blog but seems the header image is already centered. Isn't it?

Cheers...

Louis-Philippe LONCKE said...

I am trying to have NO SPACE (zero pixels) between the header-image and the menu (blogger pages). As you can see, currently an overlap: http://sopediving.blogspot.com

The image is 20pix higher than the one i use here:http://belgikayak.blogspot.com/

Yes it is a custom templaete based on a standard template of google, i mainly changes column pixels etc...
so i exported BelgiKayak and imported to Sope Diving.
I knoz the solution will be 1 line but I am not a programmer. I have been reading forums to solve this but not found yet.

Mayura De Silva said...

Hi Louis,

Add following CSS style to your blog mate :)

.header-outer
{
height: 145px;
}



Cheers...

Louis-Philippe LONCKE said...

working perfectly thx.

awan biru said...

thank you... it help me a lot :) i'm newbie in blogger world

Jessibeth Vicenty said...

Hi, by any chance does blogger allow you to change your header with each post? Like a new image. Thanks and great tutorial

Mayura De Silva said...

Hi Awan,


You're welcome and glad to hear you could use a help from this post mate :)


Thanks for sharing your comment here :)


Cheers...

Mayura De Silva said...

Hi Jessibeth,

You can have an animation or slider as your header with vivid images. But changing the header with each and every post is not practical and a time consuming process on Blogger dear :)

Thanks for your compliments too Jessibeth :)

Cheers...

Jennifer said...

I uploaded an image instead of the title and description. How can I center this image on the blog? Thanks!

Mayura De Silva said...

Hi Jennifer,

You have to access your template and modify HTML code. Rather than centering, it's much better if you can upload the header image fit to your header size :)

Cheers...

ArtaGene said...

I do believe I can follow these instructions!
Have a question, was told by someone that if the source for an image is no longer available, the image will disappear.
If the source is your hard drive and you no longer use that computer...has the image been stored on Bloggers server? so it will remain?
Like in wordpress, not uploading to wp-content/images and just using your address on your hard drive the the image source file.

Mayura De Silva said...

Hi ArtaGene,

Of course, you can dear :) Gosh... You know stuff better than this.

Yeah, it's right dear. If the source image in no longer available or accessible by public, it won't be displayed anymore.

When you add images in Blogger, they are automatically uploaded online ArtaGene. Blogger uses Picasa Web Albums as the storage for images / videos uploaded by the user. Head over to Picasa Web Albums and you can find images stored in there :)

Using a local address for an image is not a good practice at all dear. You can refer to local hard drive and it will show up on your blog too. But the image won't be shown to other readers as it's not accessible by 'em. Hence, online storage, where everyone can access, is the best way to go :)

Hope my answer is clear enough ArtaGene :) Else, shoot a comment below.


Cheers...

Mack said...

Hello, I have a question....

Can you tell me how to disable header banner/image for Mobile view only?

Basically... I would like to have a header image in normal web view, and in Mobile view display only the blog title in plain text

Mayura De Silva said...

Hi Mack,

Unfortunately, Blogger inherits the header image to available Mobile templates mate. But you can implement a custom header, so the Mobile view will show only blog title and description in plain text :) If you want, view my blog using a mobile device to get an idea.

You can read further on having a custom header here ~ How to Add a Custom Header in Blogger.

Hope it's helpful :)

Cheers...

Mack said...

Ah, custom header... brilliant. I got this working now



What I did is set standard blogger header to use blog title only (show only title in plain text, no image) and under widget html I set that to mobile='only'


Then, i made a custom header (this one uses image/banner) following your steps. And I have this custom header widget in html set to mobile='no' to make sure it only shows in normal web view


Anyway, thanks a lot for the help mate!

Mayura De Silva said...

Awesome! You're welcome Mack :) Glad you got it working through another workaround mate.

However keep in mind there could be a conflict if you switch to another Mobile template though. Plus, Custom Mobile template can be affect on performance for mobile users if you have a lot of widgets and scripts.

But if you find everything fine with mobile devices, you don't have to worry about that at all :)

Thanks for sharing your workaround, and it may help someone too :)

Cheers...