How to Add Breadcrumbs to Blogger Blogs Posts in 2020

How to Add Breadcrumbs to Blogger Blogs Posts in 2020

How to Add Breadcrumbs to Blogger Blogs Posts in 2020

A breadcrumb is a navigation bar that will be displayed above post. Adding a bread crumb will help you to give easy navigation within your blog. Visitors should be able to find the information they want quickly and easily. Otherwise, they will go and search for other competing websites.  Normally a bread crumb will look like as shown below.

For this post, we can add a bread crumb in the following way.


Adding Breadcrumbs to Blogger Blogs

1. Before adding Breadcrumbs to blogger blogs try to back up your blogger template to avoid bigger problems if something went wrong.  After log in to your blogger account selects a particular blog to add bread crumbs. Then go to the template section on the left sidebar.

Blogger breadcrumb1 screenshot

On the top right corner, you can find Backup/Restore. Shout it and download the full template.

2. After completing the back up of your full blogger template again come back to the template section. Edit html>>>Expand widgets. Search for the following line in your template


3. Add the following piece of code just above the line mentioned in the previous step.

.breadcrumbs {background:#eee;color:#000;float: left;width: 590px;font-size: 11px;font-family:Georgia;margin: 5px 10px 10px 0px;padding: 0px 0px 3px 0px;}

So adding breadcrumbs styling in your blog is completed. Now you can move towards the next step.

4. Search for following two pieces of code in your blogger template

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>

5. replace the above code with the code mentioned below.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on front page -->


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

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

<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> » </b:if></b:loop>

» <span><data:post.title/></span> </b:if> </b:loop> </div>


<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »

Posts filed under <data:blog.pageName/>

</b:if> </div> </b:if> </b:if> </b:if>



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

<!-- posts -->

<div class='blog-posts hfeed'>

<!-- disable default status message

<b:include data='top' name='status-message'/>default status message disabled -->

<b:include data='posts' name='breadcrumb'/><data:adStart/>

Designing your Breadcrumb for Blogger Blogs
Breadcrumbs normally shown just above the post title and it should nicely fit on your blog.  So adjust font size font family and color to suit your blog. For designing your bread crumb go to step 2 and change the color, background, etc to match your template.


How to install the widget

These steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.
Go To Blogger.com >> Your Blog >> Template
Now Backup your template.
Then select Edit HTML >> Proceed
Don’t forget to Click/Tick the Expand Template Widgets box.
Search for <div class='post-header'> and just below it paste the following  CSS code.

 <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <brc>/</brc> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == &quot;true&quot;'> <span typeof='v:Breadcrumb'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a></span> </b:if> </b:loop> <b:else/> Unlabelled </b:if> <brc>/</brc> <span><data:post.title/></span> </div>
Now let’s add the styling and important part of the widget, Search for ]]></b: skin>  and just below/after it pastes the following coding
 .breadcrumbs{ margin:0; font-size:13px; padding: 5px; box-sizing: border-box; background: #f2f2f2; border-radius: 2px; } .breadcrumbs span a.bhome{ color:red } .breadcrumbs span,.breadcrumbs span a{ color:#010101 } .breadcrumbs span a:hover{ color:red }
All Done: Now everything is completed just  Save your Template by pressing Save template button.
Note: You can change the text and buttons accordingly.

I think you love this post. If you have any queries about this post and problems with adding breadcrumbs comment here. I will keep in touch with you Asap.

0 Response to "How to Add Breadcrumbs to Blogger Blogs Posts in 2020"

Enregistrer un commentaire

Article Top Ads

Article Center Ads 1

Ad Center Article 2

Ads Under Articles