Add Breadcrumb Navigation To Blogger Blogs
I came across the breadcrumb navigation trick for blogger during its inception. But, I thought there is no use adding such a widget other than improving the navigation. The navigation simply can be improved by adding a blog archive or using the labels widget in blogger. But, I found that apart from improving the navigation it also facilitates Search Engine Optimization. Basically, the search engines view a breadcrumb as a text link to posts and provides importance to the subject of the linked page.
To basically understand this, I should define what a breadcrumb is??? To keep it simple, a breadcrumb is a widget like stuff that displays the visitor's location within a blog. Basically, it improves the navigation for a blog and helps the visitor easily jump from one part of the blog to another. To have a better understanding of what I am blabbering, please have a look at the following screen shot.
Let us now install this hack to improve our SEO and site navigation. Just follow the simple steps given below.
1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
Let us now install this hack to improve our SEO and site navigation. Just follow the simple steps given below.
1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Search for the following line in your template. Use "CTRL+F" to fasten your search.
]]></b:skin>
3. Add the following piece of code just above the line mentioned in step 2.
.breadcrumbs
{
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}
4. Save your template. Just make sure that your template is expanded. Click on the "Expand Widget Templates". Now, search for the following piece of code in your expanded template.{
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}
<b:includable id='main' var='top'>
5. Replace the following block of code with the code mentioned in this text document - "Breadcrumb For Blogger".
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
6. Save your template. That's all folks!!!<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
Visit any of your post page and enjoy the hack!! If you still face any problem regarding this widget, I am always ready to help you via mails. Even comments below the post will do!! For all those who had a smooth installation, just enjoy the hack!!!
I have read some fantastic books on English language that really helped me
improve my writing. You can buy my recommended books on
Amazon. Here is the
lists below:
Books on Grammar:
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.