Wednesday, March 10, 2010

You will find an option in Blogger which allows to add an image instead of title and description in header by going to Layout>Page Elements and also gives two other options: either use the image in background or use it instead of title and description. But sometimes it so happens that, when the image is used and added inplace of title and description, you may find that the title and the description is getting visible and appearing in front of the image. Now the questions arises "How do I use image instead of title and description?",and yes, there is a available remedy also.

Image Instead of Title and Description



Note: This guide is also an important factor of SEO and should be followed by people who are using image instead of Title and Description because if it's chosen to show image instead of title and description then you are removing an important factor of SEO.
For others, who are not using this option can keep themselves cool as you don't need it.

1. Go to the Layout>Edit HTML and back up your template.
2. Check “Expand widget templates” and look for
#header h1 {
margin:5px 20px;
padding:45px 20px .25em 10px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
and add the code in bold or replace the whole code with:
#header h1 {
margin:5px 20px;
padding:45px 20px .25em 10px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
display: none;
}
3. Search for the codes:
<b:if cond=’data:imagePlacement == “REPLACE”‘>
<!–Show just the image, no text–>
<div id=’header-inner’>
<a expr:href=’data:blog.homepageUrl’ style=’display: block’>
<img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + “_headerimg”‘ expr:src=’data:sourceUrl’ expr:width=’data:width’ style=’display: block’/>
</a>
</div>
<b:else/>
and add the following code just after <div id=’header-inner’>
<h1>Your Blog Title</h1>
This will something look like this:
<b:if cond=’data:imagePlacement == “REPLACE”‘>
<!–Show just the image, no text–>
<div id=’header-inner’>
<h1>Your Blog Title</h1><a expr:href=’data:blog.homepageUrl’ style=’display: block’>
4. Preview your template whether your image is shown correctly and save it.
Your blog will be indexed effectively though this method. Also don't forget to add a short description which contains keywords relevant to your blog content.

0 Comments:

Post a Comment