Add breadcrumb navigation (home/label/post) in blogger

Adding page navigation to your posts is a good way to engage visitors as well as search engine crawlers. Navigation helps readers to easily access any page with ease. Breadcrumb navigation is used to enhance readability and usability. This type of navigation is like breadcrumbs which ultimately reach at the home URL.

In this type the navigation has a back-end or a connection with home page like home/label/post.Bread crumb navigation can be added to the blogger template easily and successfully.

Step : 1

Step 2. Find the following piece of code (ctrl+f).

    <b:include data=’top’ name=’status-message’/>


Step 3. Now Replace it with this code

     <b:include data=’top’ name=’status-message’/>
<b:include data=’posts’ name=’breadcrumb’/>

Step 4. Find the following piece of code in your blogs Html    

<b:includable id=’main’ var=’top’>

Step 5. Now Replace It With This Code

      <!– Breadcrumb Navigation By https://www.shipmethis.com/ –>
<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>
<!– Breadcrumb Navigation By https://www.shipmethis.com/ –>

Step 6. Find the following piece of code

    ]]></b:skin>


Step 7. Now ADD BELOW Code above  ]]&gt;&lt;/b:skin&gt; tag.

    /* Breadcrumbs Css info @ https://www.shipmethis.com/ */
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
  
or you can use the following css

/* Breadcrumbs Css info @ https://www.shipmethis.com/ */ 

.breadcrumbs {background: #F7F7F7;float: left;border: 

1px solid #E6E6E6;width: 575px;font-size: 11px;margin: 10px 10px 10px 10px; 

padding: 5px 10px 5px 10px;}

Step 8. Save your template.

The CSS code is needed to show the bread-crumb navigation on all blogger posts. You can customize the gadget according to your template.  To change the color replace the “#e6e4e3″ code to any color code.

…Kindly tweet this post if you like it…

My new post is How-to-create-free-backlink-booster-for blogger template

SUBSCRIBE US FOR MORE GOOD GADGETS

Akhil S Kumar 11-04-2014

Kindly Share AheadShip Me This