Breadcrumbs is a navigation used in user interface, typically it appear horizontally across the top of a web page , after navigation, usually below title bars or headers in blog area. It gives users a way to keep track of their location within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. It is used to make navigation easy for your visitors and attain more pageviews from them. You'll find numberless benefits of using breadcrumb in blogger. It also aids you to increase your site visibility to search engines by having keywords into your site posts.
The breadcrumb display the location like this : ''Home » Label » Post Name'' Once you will done adding breadcrumbs to your blog it will also displayed to the Google search result as breadcrumbs mark up. It helps user to understand the hierarchy and structure of the website, and most importantly allow visitors to understand the categories of the content. it also helps to enrich your websites Search Engine Result Page. Using RDFa markup, you can put your breadcrumbs’ link on the search results of your website or blog for rich snippets. if you would like to add breadcrumbs to your blog, then we’re here today with a simple tips on how to add breadcrumbs in blogger. (Add Breadcrumb To Blogger)
How to Add Breadcrumb for blogger
Step 1: First Sign in to blogger.
Step 2: Go to Template > Edit HTML.
Step 3: Now Find Below code.
<b:include data='top' name='status-message'/>
Step 4: And now, replace the above code with this.
<b:include data=’top’ name=’status-message’/>
<b:include data=’posts’ name=’breadcrumb’/>
Step 5: Now find this code.
<b:includable id='main' var='top'>
Step 6: And add this code before the above mentioned code.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<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>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Note: This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove those 2 Red lines of code.
Step 7: Now find this code.
]]></b:skin>
Step 8: Paste the below code before ]]></b:skin>.
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
Step 9: Finally Click on Save Template and you are done.
Now you will see a dynamic breadcrumbs just above your blog post titles. However, if you are not able to add breadcrumbs to your blogger please fill free comment to ask me for help.
Related: 8 Search Engine Optimization Tips for Bloggers
ليست هناك تعليقات:
إرسال تعليق