One way to make the blog looks more interesting is by changing the header image with the nice one. This page will help you change your blogspot header image as I do on this blog. Hopefully useful for you.First Step
Before using photoshop, gimp or other image manipulation software to create an image, first to know is the size of the image that matches your blog header. Please do the following steps:
- Log into your blogger account, click Design, then Edit HTML. Click (enable) the Expand Widget Templates option
- In the HTML template, find: #header-wrapper. (In firefox, just press CTRL+F then type #header-wrapper) You'll find something like this:
| #header-wrapper { background:transparent url(http://www.templatesimages.com/images/Inove/bg.jpg) no-repeat scroll 0 0; border-bottom:1px solid #A6A6A6; height:90px; margin-bottom:-13px; width:936px; } |
- Note the value of width and height, both are the size of the header. We use this size to make the header image. In the HTML code above we get width = 936 pixels and height = 90 pixels.
Second Step
Now, make an image with size as we get from the first step above.
If you want, you can also edit from the existing header image, you'll just modify it then. From the codes above, the header image file is http://www.templatesimages.com/images/Inove/bg.jpg. Just download and then edit it using photoshop or other software.
Third Step
After the image is ready, then it's time to upload it. We can use any image hosting, such as imageshack.us, photobucket.com, etc. Do not forget to take the url of the image. You will need to put the url inside your blogger template.
Fourth Step
Next, perform the first step above to find #header-wrapper, then replace the background url with the image url, as shown below: (If you can not find the background section inside #header-wrapper, just type:
background:transparent url(your image url) no-repeat scroll 0 0;
inside the #header-wrapper like what's shown below). Don't forget to backup your template first.
| #header-wrapper { background:transparent url(http://www.templatesimages.com/images/Inove/bg.jpg) no-repeat scroll 0 0; border-bottom:1px solid #A6A6A6; height:90px; margin-bottom:-13px; width:936px; } |
- Last, save your template and see the result. That's all. Have a nice day !
1 comment:
Very useful post! If you want merely get iNove sidebar smaller you can do the same what is described here - Get the smaller sidebar of iNove theme.
Or you can download appropriate modified files from here - Modified iNove Theme.
Thank you!
Post a Comment