Breadcrumb Navigation For Blogger

Breadcrumb Navigation For Blogger

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 .

Breadcrumb Navigation For Blogger
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'>


<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 == &quot;item&quot;'><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;'><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'>&#160;&#160;<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.

7 comments:

  1. Awesome it works! Thank you so much see it working here https://gizz9.blogspot.in/

    ReplyDelete
  2. Firstly, thank you for your sharing about this development tips. I believe this article will useful for many readers.jogos friv gratis 2019
    Jogos 2019
    jogos friv

    ReplyDelete
  3. So first you soak your Red Wheat Berries, for 8-24 hours. You can buy Red Wheat Berries at your local health food store, often in the bulk section. And yes wheatgrass is gluten free. I too, was concerned, but after searching around and asking a licensed dietitian friend in the area, the grass itself does not contain any gluten, only the kernel, and in juicing wheatgrass you only juice the grass, so yay!
    kizi free Games
    free game online
    friv school 2019

    ReplyDelete
  4. Nevertheless the people be strong that dwell in the land, and the cities are walled, and very great: and moreover we saw the children of Anak there. The Amalekites dwell in the land of the south: and the Hittites, and the Jebusites, and the Amorites, dwell in the mountains: and the Canaanites dwell by the sea, and by the coast of Jordan. And Caleb stilled the people before Moses, and said, Let us go up at once, and possess it; for we are well able to overcome it.
    Jogo quente 2019
    jogo 360 2019
    friv school Games for kids 2019

    ReplyDelete