Recently many bloggers have found their Blogger Header image shrunk down or in some cases disappeared altogether. While the Blogger Team is on the case and working out a fix here is a working solution.
Previously the methods used to put images in the header varied from putting a picture page element in the header to adding a picture URL in the CSS code for the header. Since Blogger introduced the direct image upload to header which makes use of a separate class to house the header image we have to use the second method here.............
REMOVE THE ORIGINAL IMAGE
The first step is to remove your shrunk image. For this login at Blogger.com and click on Layout link on the Dashboard. On the Page Elements tab which opens click the Edit link on the Blog Header widget. In the popup window remove the image and save.
UPLOAD IMAGE OR GET IT'S LINK
Upload your image to a free host like Photobucket.com or Googlepages and copy down it's link. You can also upload to a Blogger post but extracting the image link is tedious and not recommended as there are more chances of getting errors.
MODIFY THE CSS CODE
The last step is to modify the CSS code in your template. For this login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Scroll down in template code box to this code :
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
Add the following lines to it :
background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;
So that it looks like this :
#header-inner {
background-position: center;
background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;
margin-left: auto;
margin-right: auto;
}
Replace LINK_OF_IMAGE with actual link of your uploaded image. Click on Preview button at bottom of Template box to increase the height from '300' if necessary. If full width of picture is not seen add the width line below the height line in the above code like this :
width:400px;
Again use Preview to see and adjust the width. Save Template. Clear the cache and view Blog.
IF YOU HAVE A 'STRETCH' TEMPLATE
If you have a stretch template use this code :
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
width:XXXpx;
height:YYYpx;
}
Change XXX and YYY to the width and height respectively, in pixels, of your image.
Blogger Shrunk My Header
1:17 AM
|
Labels:
Blog Header
|
This entry was posted on 1:17 AM
and is filed under
Blog Header
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment