How to add breadcrumbs in blogger {Tutorial}

Hello Guys, welcome to the tutorial where we will learn how to add breadcrumbs in blogger and Breadcrumbs or breadcrumb is a route utilized as a part of UI, ordinarily it show up evenly over the highest point of a website page , after route, generally underneath title bars or headers in blog territory. You can likewise discover case of breadcrumbs in my blog after route. See a screen capture to recognize what really are a breadcrumbs.

In this tutorial we will learn the technique to add Breadcrumbs trail to Blogger BlogSpot.com blogs using HTML5 microdata markup which will help Google to understand and present the information on your blog posts in search results as rich snippets.

How to Add Breadcrumbs Navigation on Blogger ?

Most importantly test rich snippets with the assistance of Structured Data Testing Tool to realize that whether you have officially executed breadcrumbs for your blogger blog. The breadcrumbs will replace the whole url of your webpage address with text links of Categories or Tags under which your article has been posted.

ALSO READ :- animoji apk for androidALSO READ :- Mini Militia invisible mod apk Download

In case your blog have breadcrumbs, you will see your blog labels followed by blog address instead of post URL just below the title of your blog posts in rich snippets results. For example if your particular blog post is labelled under Blogging, Blogger Blog and SEO with webpage address:

www.andropcmania.com/year/month/blogger-breadcrumbs-navigation.html

The same will replace with :-

www.andropcmania.com › Blogging › Blogger Blog › SEO 

Typical breadcrumbs look like this:

Home page > Section page > Subsection page or Home page >> Section page >> Subsection page.

Steps to Add Breadcrumbs in Blogger :-


Step 1 - Login to Blogger Dashboard > Design > Edit Html

ALSO READ :- Trap adventure 2 for apk for android download

Find Below code:-

Step-2 -  Search (Ctrl+F) for <b:includable id='post' var='post'> 
and replace it with below

<b:includable<b:includable  idid=='post''post'  varvar=='post''post'>>
<b:if<b:if  condcond=='data:blog.pageType == &quot;item&quot;''data:blog.pageType == &q >
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><!--
Breadcrumbs microdata markup added by www.superwebtricks.com START. -->
<div class='swtBreadCrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<span itemprop='title'>Home</span></a>&#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span typeof='v:breadcrumb'>
<a expr:href='data:label.url' itemprop='url' title='Categories' property='v:title' rel='v:url'>
<span itemprop='title'><data:label.name/></span>
</a>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>|
</b:if>
</b:loop>
</b:if>
&#187;
<a expr:href='data:post.url' itemprop='url' title='Post Title'>
<span itemprop='title'>
<data:post.title/>
</span>
</a>
</div>
</div>
</b:if>

Step 3 -

Search for </b:skin>

Now, add the following CSS code just above/before the </b:skin>

.swtBreadCrumbs:before { content:"You are here:";font-size: 85%;letter-spacing: 2px;}
.swtBreadCrumbs{width:auto;padding:0 0 5px 0;margin:0 5px;font-size:95%;border:2px solid #EDE;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;padding: 5px;text-align: left;color:#000;background:#C3B9A8;background:-webkit-linear-gradient(top,#C3B9A8,#F3F1E6);background:-moz-linear-gradient(top,#C3B9A8,#F3F1E6);background:-ms-linear-gradient(top,#C3B9A8,#F3F1E6);background:-o-linear-gradient(top,#C3B9A8,#F3F1E6);background:linear-gradient(top,#C3B9A8,#F3F1E6);line-height:22px}

Step 4 -

Save your blog template and enjoy.

If you are using multiple labels for one post then this breadcrumbs will show only the last label you have added, so put label at end in Labels for this post: section for which you want to show in your breadcrumb.

All done! Congratulations! Breadcrumbs navigation has been successfully added to your blogger blog. You can customize the above CSS as per your desired looks.

ALSO READ :- Fly through walls Mini Militia Mod apk Download - 2018 latestALSO READ :- Mini Militia invisible mod apk Download

Moreover, this breadcrumbs navigation won't affect your SEO score so don't hesitate while using it.
Keep visiting !