Resize Blogger Header Image
Blogger does not provide you an easy way to resize your header image. Imagine how troublesome it is to get your image's dimensions to be perfect before you can actually upload it to Blogger. But usually we face a less-than-ideal case. So we'll be left with only one option, to resize our original image and then re-upload them.
In this tutorial, I will share with you 2 methods on how you can resize your image directly by tweaking some code without having to resize your original image and reupload this image to Blogger. Of course, you can always opt to resize your image (using MS Paint, Photoshop or online image resizing websites like http://www.resizeyourimage.com/) and then reupload your image to Blogger. But it's always more convenient to just change a number or two and see an instant change in your header's image.
UPDATE: If you're a beginner, check this link out instead.
I will be using Simple Template by Josh Peterson in this tutorial. It should work with other built-in and third party templates as well. If it doesn't, the idea still remains the same. It's hard to provide one generalised solution to all the templates out there.
IMPORTANT NOTE:
This tweak will not work if you choose to display your title and description over your header image. This is because when your title is displayed, technically your header image acts as a background (instead of an image object). It is not possible to conveniently style the size of a background image, although there is a CSS3 property that can be used (background-size). Unfortunately, at the time this tutorial was written, most browsers do not support CSS3 yet. So you'd have to hide your title and description to allow this tweak to work for now. To hide your title and description, go to Page Elements/Layout - Edit on Header - under Placement, choose 'Instead of Title and Description'.
In this tutorial, I will share with you 2 methods on how you can resize your image directly by tweaking some code without having to resize your original image and reupload this image to Blogger. Of course, you can always opt to resize your image (using MS Paint, Photoshop or online image resizing websites like http://www.resizeyourimage.com/) and then reupload your image to Blogger. But it's always more convenient to just change a number or two and see an instant change in your header's image.
UPDATE: If you're a beginner, check this link out instead.
I will be using Simple Template by Josh Peterson in this tutorial. It should work with other built-in and third party templates as well. If it doesn't, the idea still remains the same. It's hard to provide one generalised solution to all the templates out there.
IMPORTANT NOTE:
This tweak will not work if you choose to display your title and description over your header image. This is because when your title is displayed, technically your header image acts as a background (instead of an image object). It is not possible to conveniently style the size of a background image, although there is a CSS3 property that can be used (background-size). Unfortunately, at the time this tutorial was written, most browsers do not support CSS3 yet. So you'd have to hide your title and description to allow this tweak to work for now. To hide your title and description, go to Page Elements/Layout - Edit on Header - under Placement, choose 'Instead of Title and Description'.
Method 1:
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'
Find for the following lines:
And this is how the new code looks like:
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'
Find for the following lines:
<img expr:alt='data:title' expr:height='data:height'Replace the above lines with the one I have below.
expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>
<img expr:alt='data:title' expr:height='data:height'All you have to do now is adjust the width from 100% to some other number. To increase it, you can go beyond this number. 200% for example, though your image will become pixelated.
expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display:block; height:auto; width:100%;'/>
And this is how the new code looks like:
Method 2:
In this method, you'd have to identify your image's ID, and use this ID to style your header image. I chose this as Method 2 because identifying your header image's ID is not a convenient process. Check out this tutorial on how you can identify your image's ID. Go ahead and look for your header image's ID when you're ready. This is what my Firebug's inspection shows:
My image ID is Header1_headerimg. Now that I have my image's ID, I can easily style this image using CSS. Copy this ID and head over to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
In this method, you'd have to identify your image's ID, and use this ID to style your header image. I chose this as Method 2 because identifying your header image's ID is not a convenient process. Check out this tutorial on how you can identify your image's ID. Go ahead and look for your header image's ID when you're ready. This is what my Firebug's inspection shows:
My image ID is Header1_headerimg. Now that I have my image's ID, I can easily style this image using CSS. Copy this ID and head over to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#Header1_headerimg{
width: 100%;
height: auto;
}
Same concept as before, you just have to adjust the percentage and your header image will change. Have fun!Category Article Tutorial
