How to fix your blogs header

Today im going to show you how you can fix your blogs header as lots of blogspot users have been having problems with their header image so i recommend you download a backup copy of your template or use a test blog now you will need to expand the widget templates and find the following code highlighted in the screenshot



it should be within the #header-wrapper when you have found it replace it with the following code

<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id=' "headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "height: " + data:height + "px;"' id='header-inner'>
<div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!-- Normal header No image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>



now copy following css code
(note: ive set the background position as centered you could change it to left or right if you wanted)
#header-inner {
background-repeat:no-repeat;
background-position:center;
}
#headerimg {
text-align:center;
margin:0 auto;
}


paste it in your template like so and save it



now add an image to the header throught the page elements tab also you might need to tweak the css code a bit it would be best to know the exact size of the image you are going to use so if the header image is wider than the #outer-wrapper it would spoil the layout it is just a matter of tweaking the css code and depends what layout you are using anyway i hope this works for most of you if not let me know and i will try and help you

10 Responses to “How to fix your blogs header”

Very useful, thanks!

Great info, thanks for sharing

After hours of Google, I finally find someone that helped me... Thank you

I am trying to make a header with a picture on it and can't get it to work. I tried your suggestions and when I click on save, it says some of my widgets will be deleted. I am not sure what to do. If you don't mind helping please email me at shumamy1@yahoo.com Thanks.

AMY what is the size of the image and where do you want it ? center, left or right and what is the URL of the site you are trying to use the image on ? i need more details

Thank you.

I did as instructed, but i have "split" images. In other words, the image repeted itself! Where did i go wrong?

@Anonymous
you need to make sure your CSS has the background property set to no repeat for example
#header-inner {
background-repeat:no-repeat;
}

How in the heading on the right to add a widget,
Please guide, thank you
http://weimemo.blogspot.com/

@peter
I have already published a post showing how to add a widget on the right of the header here

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2016 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger