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.
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 {and add the code in bold or replace the whole code with:
margin:5px 20px;
padding:45px 20px .25em 10px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header h1 {3. Search for the codes:
margin:5px 20px;
padding:45px 20px .25em 10px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
display: none;
}
<b:if cond=’data:imagePlacement == “REPLACE”‘>and add the following code just after <div id=’header-inner’>
<!–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/>
<h1>Your Blog Title</h1>This will something look like this:
<b:if cond=’data:imagePlacement == “REPLACE”‘>4. Preview your template whether your image is shown correctly and save it.
<!–Show just the image, no text–>
<div id=’header-inner’>
<h1>Your Blog Title</h1><a expr:href=’data:blog.homepageUrl’ style=’display: block’>
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.
Labels: Blogger
0 Comments:
Subscribe to:
Post Comments (Atom)