Learn How To Become a blogger ,Free Templates,Blogger Widgets, Blogger Gadgets,Blogger Tricks And Tips ,Download browsers,software,Net

Friday, September 21, 2012

Add Breadcrumb Navigation For Blogger

In this tutorial you can know how to Add Breadcrumb Navigation For Blogger .This Widgets help your visitors to learn its location in your blog ,
The links are a trail from the page you are currently on back to the home page.So for example on a blog you will have the home page link, a link to a label used for the post then the post title.This will be displayed like this
Home > Label > Post TitleThis is a very popular type of navigation on all sorts of sites and in this post i will show you how to add it to blogger.



How To Install
  1. Click on the 'template' tab
  2. Backup your Template before making any changes to your blog
  3. Now Expand Widget Templates
  4.  click on the "Edit HTML".
  5. Now find this code (Ctrl+F)
<b:include data='top' name='status-message'/>
Replace it with this code
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
Now Find this.
<b:includable id='main' var='top'>
Replace above code with below code.
 <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop><b:else/>
&#187; Uncategorized
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span></p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</span></p></b:if></b:if></b:if></b:if>
</b:includable>
<b:includable id='main' var='top'>
Now find this code
]]></b:skin>
Copy the code shown below and paste Before/above it
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
 Save , Done!

0 comments:

Post a Comment

Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
JeHad Hussein

Note: Only a member of this blog may post a comment.

Subscribe via email for free

Activate your subscription by clicking on the link in an email from Feedburner. We respect your privacy.

Most Popular

 

random topics

Followers

Are you looking for?

Become a Fan On Facebook!

Follow @Bloggertofree