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
...Read more!

How to stop widgets been deleted when uploading templates

So if you have ever downloaded a free template and wanted to install it without having to reinstall all those sidebar widgets again read on im going to use a 3 column i created for this tutorial you can download it for free here
i recommend you use a test blog for this tutorial by default when you create a new blog it will already have 2 sidebar widgets installed so you should add another two for this tutorial. Now you should have four widgets in your sidebar try uploading this free template which has two widgets you will get the following warning your widgets are about to be deleted




so for this example i have four widgets in my current template and i want to use the free one which only has 2 widgets but i dont want to reinstall the other two widgets
(note:you could have a lot more than 4 widgets)

to get round this you will need to download a copy of your template and open it with a simple text editor and find the widget code

so here's the code for my current templates sidebar
(red and blue code is the profile and archive code some removed for simplicity)


<div id='sidebar-wrapper'> <!-- start sidebar -->
<!-- section start tag below here -->
<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<!-- Some code removed for simplicity -->

</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>



<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>

<!-- Some code removed for simplicity -->

<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

This is the third widget code

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

This is the fourth widget code

<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

</b:section> <!-- closing section tag -->
</div> <!-- end sidebar wrapper-->

note the widget and section opening and closing tags


every widget is within an opening and closing section tag and every widget has a opening and closing tag
so i would need to copy the code for the other two widgets (green code) and paste them somewhere within the opening or closing section tags in the free template sidebar like so



so that way when i upload the free template it will still have all the four widgets without deleting any you could do that with 10+ widgets if you had that many
so every time i create a new blog template i would just copy all the widgets code straight into the new template before uploading it and all those widgets would still be there a great time saver

...Read more!