Breadcrumb navigation is the most widely used user friendly navigation for websites, which allows site users to easily jump from one page of site to another; many popular sites like http://amazon.com, http://apple.com also use this type of navigation. People usually place breadcrumb above site’s contents. All credit for breadcrumb trail in blogger / blogspot blogs goes to Hoctro and Aneesh of http://www.bloggerplugins.org/.
Breadcrumb trail appears in this format:
Home (Or you can use homepage title) > Category > Sub Category > (sometimes may be more categories) post title
Home (Or you can use homepage title) > Category > post title
Seo advantages of breadcrumb navigation:
Breadcrumb navigation links to other pages of your site, which create a search engine friendly linkbait (internal linking) helps search engine spider to index more contents (but in blogger labels are restricted by robots.txt, you can edit it by going to blogger -> setting -> search preferences), Breadcrumb trail is also part of rich snippt, if you have breadcrumb navigation installed on your site, then Google will show it in serp (search engine result page), which gives your site attraction in search engine.
Here is screenshot from google:
How to add breadcrumb navigation to blogger?
Follow following steps to add breadcrumbs navigation to blogger / blogspot blogs:
1. Go to Blogger dashboard select template -> edit html -> (you will see an html editing warning) -> click proceed -> then click expand widget templates.
2. Find following code (press ctrl + f to find):
<b:include data='top' name='status-message'/>
3. And replace above line with following code:
<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/>
4. Now find following code in template:
<b:includable id='main' var='top'>
5. And replace above code with below code:
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/><b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span class='post-labels'><span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span><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"'> »
<span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span></b:if></b:loop><b:else/> » Unlabelled</b:if> » <span><data:post.title/></span></b:loop></span></p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'><p class='breadcrumbs'><span class='post-labels'><a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/></span></p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'><p class='breadcrumbs'><span class='post-labels'>
<b:if cond='data:blog.pageName == ""'><a expr:href='data:blog.homepageUrl'>Home</a> » All posts<b:else/><a expr:href='data:blog.homepageUrl'>Home</a> » Categories under <data:blog.pageName/></b:if>
</span></p></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'>
<!--Breadcrumbs Navigation For blogger -->
6. Add css to compose apperance find:
]]></b:skin>
7. replace above code with below:
.breadcrumbs{background:#fff;color:#289728;padding:12px;border:2px solid #333;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;box-shadow:2px 2px 2px #CCC;}
]]></b:skin>
8. Now Save Template, you have now sucessfully installed breadcrumb navigation on blogger.
تم النشر يوم
الأربعاء، 4 سبتمبر 2013 ' الساعة
Please share some latest updates for SEO Services.
ردحذف