Skip to main content

How To Add Breadcrumbs to Blogger

Add Breadcrumbs to blogger

How To Add Breadcrumbs to Blogger: Breadcrumb is the navigation trail which tells about location on our site or blog to visitors. It tells readers, where (on which page) they actually are on our blog. it help to clear the structure of website to user also user can understand now where is he/she.
Breadcrumb navigation is used to create a user friendly website. Using it, readers can easily navigate to your blog by just clicking a link or few. Like in the below image, if you are on Step 3 (like: Social Media > Google Plus > Traffic) then you can easily come back to Social Media category by simply clicking on Step 1 shown on the breadcrumbs.
It also helps to increase your site’s ranking in search engines by adding keywords into your blog posts.

Adding Breadcrumb Navigation in Blogger

Note: You must backup your blog template first before adding breadcrumb navigation in your blog.

Now follow below steps to Add Breadcrumb in blogger:
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now press Ctrl+ F and Search for below code.
<b:include data=’top’ name=’status-message’/>
You can see the line in below code.
Find code on blogger

Replace this line code with the below one.
<b:include data=’top’ name=’status-message’/>
<b:include data=’posts’ name=’breadcrumb’/>
  • Now find this code in your blog template.
<b:includable id=’main’ var=’top’>
  • Replace it with the below code.
<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <b:else/>
  <b:if cond='data:blog.pageType == "item"'>
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <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'>
  <b:if cond='data:label.isLast == "true"'> »
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:if>
  </b:loop>
  <b:else/>
  »Unlabelled
  </b:if>
  » <span><data:post.title/></span>
  </b:loop>
  </span>
  </p>
  <b:else/>
  <b:if cond='data:blog.pageType == "archive"'>
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
  </span>
  </p>
  <b:else/>
  <b:if cond='data:blog.pageType == "index"'>
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <b:if cond='data:blog.pageName == ""'>
  <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
  <b:else/>
  <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
  </b:if>
  </span>
  </p>
  </b:if>
  </b:if>
  </b:if>
  </b:if>
  </b:includable>
<!–Breadcrumbs by http://www.twoTricks.blogger.com/–>
  • Find ]]></b:skin> and paste the below code just above/before it.
/* Breadcrumbs by http://www.twoTricks.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
  • Now your code is ready. Replace your entire template code with your Notepad file code.
Click on save template button.
You are Done!

How To Add Breadcrumbs in Blogger Summary:

This is all about adding breadcrumb navigation trail in blogger. Add it into your blog and improve user experience. The easier you will make your blog to navigate, the more audience will love to read it again and again. You might be struggling to increase your blog’s traffic and pageviews. If it is so, then I must say, adding breadcrumb navigation is the smart tactic to get more pageviews and Organic traffic. If you are interested to get more traffic to your blog, you must read these Traffic generating ideas on our main blog. 

Comments

Popular posts from this blog

Show Breadcrumbs in Google Search Results for Blogger

Show Breadcrumbs in Google Search Results for Blogger : Everyone can add Breadcrumbs in their blog but you can Rear find this topic. so today you learn about how you can show you breadcrumbs in google search results for blogger, this Article is only for blogger. You need to follow few below steps: Go to the Dashboard > template > Edit HTML Press CTRL + F and search bar is appear. Find Article Tag in your template. if your theme in HTML 5. <Article If you find Article tag then paste below cord on the above of Article Tag. Note: If your theme is not in HTML 5 and you are not able to find article tag in your theme then paste below line and search. itemtype= ' http://schema.org/BlogPosting ' Step 4: Paste below code above this line. <b:if cond= ' data:blog.pageType == &quot;item&quot; '> <b:if cond= ' data:blog.pageType == &quot;item&quot; ' > <div class= ' breadcrumb ' xmlns: v= ' http://rdf.

How To Start A Blog And Make It Successful

How To Start A Blog And Make It Successful : If you are a new blogger and you don't know about blogging and you want to make it successful then you must know about some important thing otherwise you can not get desire output from your blog. and you waste your all efforts and time on blog. Read some my Experience Suggestion below. How To Start A Blog And Make It Successful Never Use Free Blogger Theme:  First Remember one thing never use free themes you are on WordPress or blogger doesn't matter don't use free themes because they are not develop accordingly today requirement few themes are not even not responsive and also not SEO friendly. if you want your blog go viral on social media and google then please be original write your own content and must post that contents which audience demand. But if your theme is not good you may right your own contents but finally your google can't understand your posts and it take long time in indexing also due to errors google

How to Disable Copy Paste JavaScript For Blogger

Disable Copy Paste JavaScript For Blogger : In this Article we share with you how you can disable copying text from your blog and disable CTRL + C key. it will help you to protect your content from copy cats. Here is the Disable Copy Paste Script for Blogger. Now days any one want to Earn huge money, copy cats copy your original content from your blog and paste into their own blog, so you can't take any action against him if you don't purchase DMCA. if you don't have a money to purchase purchase a DMCA copyrights then just simple use this script no one can copy your contents from your site, and feel free to use this Script this script is not harmful for your site. it is the best script for content protection this script is build in JavaScript also we have a CSS disable copy paste script so CSS copy paste disable is more faster then JavaScript Script. you can use one of them at a time. Here is the link of CSS Script  CSS Disable Copy Function . Here we share with you a Dis