Breadcrumbs is a graphical control element used as a navigational aid in user interfaces. It allows users to keep track of their locations within websites or blog. Blogger do not have any gadget for breadcrumb menu till now but as the codes are R/W. You can easily add breadcrumb navigation to blogger using below html codes .
These codes for breadcrumb menu uses blogger conditional and data statements to display crumb navigation. I have also included microdata markup in codes which makes them also visible to search engines and help in boost SEO.
How to install breadcrumb navigation in blogger ?
Step1: Go to Blogger>Theme>Edit html.
Step2: Click anywhere in the codes , Press Ctrl+F and search for <div class='blog-posts hfeed'>
Step3: Paste below codes just after the <div class='blog-posts hfeed'>
Step4: Now search for ]]></b:skin> and add below CSS codes before it.
Save Changes, You have successfully setup breadcrumb for blogger.
How to install breadcrumb navigation in blogger ?
Step1: Go to Blogger>Theme>Edit html.
Step2: Click anywhere in the codes , Press Ctrl+F and search for <div class='blog-posts hfeed'>
Step3: Paste below codes just after the <div class='blog-posts hfeed'>
<b:if cond='data:blog.homepageUrl != data:blog.url'><div class='bcm'>
<div style='display: inline;' typeof='BreadcrumbList' vocab='http://schema.org/'>
<div itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem' style='display: inline;'><a href='/' id='buttonboxback' itemprop='item' itemscope='' itemtype='http://schema.org/Thing'><span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/></div><b:if cond='data:blog.pageType == "item"'><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"'><div itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem' style='display: inline;'><a expr:href='data:label.url' id='buttonboxback' itemprop='item' itemscope='' itemtype='http://schema.org/Thing'><span itemprop='name'><data:label.name/></span></a> <meta content='2' itemprop='position'/></div></b:if></b:loop></b:if></b:loop></b:if><div itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem' style='display: inline;'><a expr:href='data:blog.url' itemprop='item' itemscope='' itemtype='http://schema.org/Thing'/><span id='buttonboxback1' itemprop='name'>  <data:blog.pageName/></span> <meta content='3' itemprop='position'/></div></div>
</div><br/></b:if>
<div style='display: inline;' typeof='BreadcrumbList' vocab='http://schema.org/'>
<div itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem' style='display: inline;'><a href='/' id='buttonboxback' itemprop='item' itemscope='' itemtype='http://schema.org/Thing'><span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/></div><b:if cond='data:blog.pageType == "item"'><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"'><div itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem' style='display: inline;'><a expr:href='data:label.url' id='buttonboxback' itemprop='item' itemscope='' itemtype='http://schema.org/Thing'><span itemprop='name'><data:label.name/></span></a> <meta content='2' itemprop='position'/></div></b:if></b:loop></b:if></b:loop></b:if><div itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem' style='display: inline;'><a expr:href='data:blog.url' itemprop='item' itemscope='' itemtype='http://schema.org/Thing'/><span id='buttonboxback1' itemprop='name'>  <data:blog.pageName/></span> <meta content='3' itemprop='position'/></div></div>
</div><br/></b:if>
Step4: Now search for ]]></b:skin> and add below CSS codes before it.
#buttonboxback {display:inline;background-color: #1E90FF; padding:5px;padding-left:8px;width:120px;height: 30px;position: relative;border-radius: 5px;text-align: center;color: #fff;font: bold 14px/30px Sans-Serif;text-decoration: none;}#buttonboxback:hover {background-color: #0081ff;}#buttonboxback:after {z-index:1;content: "";position: absolute;top: 0;right: -11px;border-style: solid;border-width: 13px 13px 13px 0px;border-color: transparent #1E90FF transparent transparent ; transform: rotate(-180deg);}#buttonboxback:hover:after {border-right-color:#0081ff;}#buttonboxback1 {display:inline;background-color: #fff; padding:5px;width:120px;height: 30px;position: relative;border-radius: 5px;text-align: center;color: #000;font: normal 14px/30px Sans-Serif;text-decoration: none;}
Save Changes, You have successfully setup breadcrumb for blogger.
