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?
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
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 :-)
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
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...
How can I make my original template be shown when my blog is viewed with a mobile device? Because its not the same! Merci :)
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...
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
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...
I followed your instructions. But it didn't show my header image. And only show my blog title and description in one line :(
Hi Chathu,
What option did you use when setting your header image? :)
Cheers...
Show Blog Title and Description with Background Header Image option. But it displayed only blog title and description, but not the image dear.
When you upload your image, does it show preview of your header image you have uploaded there dear? :)
mine did and I am having the same problem
~Kate
Hi Kate,
What happens when you upload your header image? Do you see any preview? :)
Cheers...
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.
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...
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
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...
How to stretch the "Image header"?
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...
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
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...
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
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...
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.
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...
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. :)
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...
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
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...
Nope, it didn't help. What should I do now. I really want that header image up there. It's gonna have my logo!!
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.
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!
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...
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!! :-(
Can you apply a background image over there without uploading a custom image? It works?
Yes, and all of that shows in the preview, but doesn't get saved!
Is it same if you use another Dynamic view and apply image again?
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! :|
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...
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.
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...
Thanks so much Mayura. Cheers.
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.
Hi PCJ,
As mentioned in the post, you can show title with an background image :) Did you try that option?
Cheers...
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...
Thanks! Do you think adding a number would make it difficult for people to visit? Like mademoiselles8.blogspot.com or something?
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...
Can I have a custom background if my template s simple? Thanks
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...
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!
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...
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
Can you drop me your blog URL? :) I might able to get better idea that way.
Cheers...
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!
Also, how can I make this space between the blog title and the blog posts white too? Thanks again!
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...
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...
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
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...
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.
Hi Mate,
As you have followed the tutorial here, whenever they click on your header image, they will be redirected to your homepage.
Cheers...
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?
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...
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.
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...
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
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...
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.
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 ?
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...
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...
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!
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...
Hi Gokce,
I've followed to your blog but seems the header image is already centered. Isn't it?
Cheers...
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.
Hi Louis,
Add following CSS style to your blog mate :)
.header-outer
{
height: 145px;
}
Cheers...
working perfectly thx.
thank you... it help me a lot :) i'm newbie in blogger world
Hi, by any chance does blogger allow you to change your header with each post? Like a new image. Thanks and great tutorial
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...
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...
I uploaded an image instead of the title and description. How can I center this image on the blog? Thanks!
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...
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.
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...
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
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...
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!
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...