One way to make the blog more interesting is to change the image on the header like the picture on this side. Especially when using a free template provided by another party, then a lot must be adjusted, not just the headers, but also blog width and the other element.On this occasion, I want to share tips to change the header image on blogger as I do on this blog. Hopefully can be useful for you.
The first step, before we make the header image using image manipulation software like photoshop, gimp or others, we must first know the image size to be made, so that image created later in accordance with the size of the header, so it won't be too big or too small. The tips as follows:
- Login into your blogger account.
- Click on Layout, then Edit HTML.
- Inside your HTML template, locate the code: # header-wrapper. Then you'll find writing 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 the width and height, both are the size of the header. These measurements were used to make the header image. In the HTML codes above we get the width = 936 pixels and height = 90 pixels. So the size of header image you've got to make is 936 x 90 pixels.
- Okay, after you know the size of the image header, now is the time you make a good picture suits your blog topic.
The second step, you have to make the header image based on that size. You can use photoshop, gimp, paint.net, or others. It's up to you.
If you want to, you can also use an existing image from the template, then modify it. From the HTML code above we could get the header image url is http://www.templatesimages.com/images/Inove/bg.jpg. Just download this file, and then edit it using photoshop or other image software.
The third step, after you've finished creating the header image, then now is the time you upload it. You can use any image hosting site that you like. As a suggest, you can use ImageShack (http://imageshack.us/) as a place to upload images. Do not forget to take the image link.
The fourth step, the last we'll replace the blog template codes. Similar way in the first step above, you've to login into blogger.com, click Layout, then Edit HTML. Then find the text #header-wrapper, you'll get like below:
| #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; } |
- In the background section, change its url with your image url. On codes above, the url should be replaced is located on red line. If you do not find the background section in the #header-wrapper, then you must write a complete background codes such as in the codes above. Do not forget to replace the url with one you have uploaded.
- After that save the template, and see the results.
No comments:
Post a Comment