Download Software for Windows, Mac, Android, & IOS Devices Androme

Search Suggest

How to Add Breadcrumbs on Blogger Template

Breadcrumbs are the secondary navigation of the users that helps to show a user location on a site or web page. It is important to add breadcrumbs to

How to Add Breadcrumbs on Blogger Template

Breadcrumbs are the secondary navigation of the users that helps to show a user location on a site or web page. It is important to add breadcrumbs to a website. it can help to go back there before the page or site. It is also important for SEO purposes.

Today in this tutorial, we are talking about how to add breadcrumbs to a blogger template. I will provide the complete breadcrumbs code and process.


Step of Adding Breadcrumbs on Blogger Template

1. Search <b:includable id='post' var='post'>

If you are add any content on <b:includable id='post' var='post'> the content should be visible on your site. So, we need to add breadcrumbs on this includable.

We've added one condition to these breadcrumbs to make them visible on a blog section and a page section.

2. Breadcrumbs Code

You need to paste the breadcrumbs before the title of the post. So, there you can find this type of code on <b:includable id='post' v ar='post'>.

 <a expr:name='data:post.id'/>

      <b:if cond='data:post.title'>

        <h3 class='post-title entry-title' itemprop='name'>

          <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>

            <a expr:href='data:post.link ? data:post.link : data:post.url'>

              <data:post.title/>

            </a>

            <b:else/>

            <data:post.title/>

          </b:if>

        </h3>

      </b:if>


This is the post title code before this code you need to paste the following breadcrumbs code.

 

 <!-- Breadcrumbs -->

<b:if cond = 'data:view.isSingleItem'>

      <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>

        <b:class cond='data:post.labels any (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])' name='sponsored'/>

        <div class='homeLink' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

          <a expr:href='data:blog.homepageUrl.canonical' itemprop='item'><span itemprop='name'>

              <data:messages.home/>

            </span></a>

          <meta content='1' itemprop='position'/>

        </div>

        <b:if cond='data:post.labels'>

          <b:loop index='num' values='data:post.labels' var='label'>

            <b:if cond='data:num == 0'>

              <div class='labelLink' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

                <b:class cond='data:post.labels any (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])' name='sponsor'/>

                <b:if cond='data:post.labels any (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'>

                  <svg class='line' viewBox='0 0 24 24'>

                    <path d='M4 3h16a2 2 0 0 1 2 2v6a10 10 0 0 1-10 10A10 10 0 0 1 2 11V5a2 2 0 0 1 2-2z'/>

                    <polyline points='8 10 12 14 16 10'/>

                  </svg>

                </b:if>

                <a expr:href='data:label.url.canonical' itemprop='item'><span itemprop='name'>

                    <data:label.name/>

                  </span></a>

                <meta expr:content='data:num+2' itemprop='position'/>

              </div>

            </b:if>

            <b:if cond='data:num == 1'>

              <div class='labelLink' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

                <a expr:href='data:label.url.canonical' itemprop='item'><span itemprop='name'>

                    <data:label.name/>

                  </span></a>

                <meta expr:content='data:num+2' itemprop='position'/>

              </div>

            </b:if>

          </b:loop>

          <b:elseif cond='data:view.isPost'/>

          <div class='labelLink noLabel'>Uncategorized</div>

        </b:if>

        <b:tag class='titleLink' cond='data:view.isPage' expr:data-text='data:post.title' name='div'/>

      </div>

</b:if>

      <!-- End of Breadcrumbs -->

 


Hello to everyone. My name is Sandesh Tandan. Sandeshtandan.com was created by myself. It's my personal blog where I offer graphic design, Blogging, programming, and digital marketing advice.

Post a Comment

Feel Free To Contact