Change image header in blogger

10:30 PM

(2) Comments

I had mentioned before that I will come out with my own tutorial how to change image header in blogger. This tutorial will change image header for K2 Blogger Beta Template as I had promise. After download the theme to your local computer, unzip it and open that file with any text editor. My advice is open it by Word pad to see and understand the source code better. To change the image, just find #headr. If you had a problem to find it, you can use Find function. From the menu, click Edit and then Find, enter #headr. Now you need to find where is the image URL see example below,
#headr {
padding: 0;
margin: 0;
position: relative;
height: 200px;
background: #3371A3 url('http://photos1.blogger.com/blogger/7994/1253/1600/K2.jpg') no-repeat bottom center;
}
Just copy and paste the url in the address bar of your browser and you can see the image file. Define that image size or just save that image into your computer. Create your own image and make sure the image size is exactly same as the original. Upload your image to the internet and do not forget the URL of your new image because you need to change the old image URL sown as below.

#headr {
padding: 0;
margin: 0;
position: relative;
height: 200px;
background: #3371A3 url('http://your_new_imahe_url_image.jpg') no-repeat bottom center;
}

This screen shoot will might help you for a better understanding.

kaitor

2 Responses to "Change image header in blogger"

Anonymous said :
March 8, 2008 at 12:03 PM
The name of my blog is still overriding the image that I put up, how can I change that?
kaitor said :
July 29, 2008 at 8:00 AM
From edit html, find line and try to remove it. Do not forget to backup your template.
<h1><a expr:href='data:blog.homepageUrl'>your blog name</a></h1>

or else, find this line

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Your blog name' type='Header'/>

change: locked='true' to locked='false'

after that, go to add page element and you can remove it

Post a Comment