Breadcrumbs: these are navigational aids which are either placed placed on top or bottom of the body
content of a web page. There presence allows reader to quickly refer to the links that come with breadcrumbs to rescue them back to the homepage, or parent category of the current page.
Adding breadcrumb to your blog enables your reader to easily trace the category and section from where the post is hidden.
IMPORTANCE OF BREADCRUMB
1. It helps to avoid the reader to perambulate around looking for where the post is hidden.
2. Another thing is that before your can register for Google adsense, you must have include breadcrumb to you blog.
3. Breadcrumb helps in search engine optimization because it provide quick navigation guide on where to go next time you visit the page.
4. It helps the readers to observe their current location among other links on that website.
5. It takes the reader directly to his location serving as a landing page.
6. It also help the to reader to quickly navigate and complete his task quickly.
Now I will show you the procedure on how you can add breadcrumb to your blog.
Procedure
Note; you must have categorise your post with label before this trick can work. If you haven't done that, view How to group blog post into categories and labels
1. Go to your dashboard, select template.
2. Click on edit html and thick expand widget.
Note: make sure
you read how to backup your template before you continue because if you should mistakenly alter this content wrongly, it will affect you blog design.
you read how to backup your template before you continue because if you should mistakenly alter this content wrongly, it will affect you blog design.
Press ctrl f to find
3. Now find ]]></b:skin>
And copy and the code highlighted below
/* Breadcrumb from www.swift24tech.blogspot.com----------------------------------------------- */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:100%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
And paste it just above ]]></b:skin>
4. Again find <data:post.body/>
And copy the code highlighted below
<b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
And paste it just below <data:post.body/>
6. Now click save and refresh your page.
Chech the bottom of your blog, you should see something like this.
 |
| Add caption |
If you have any comment or contribution, make use of the comment box below.
Also enter your email to receive latest update while you are offline.
No comments:
Post a Comment