How to Add Breadcrumb Wrapper To Blogger

How to make breadcrumbs and what crumbs meaning? Breadcrumb Wrapper is a kind of secondary navigation scheme which reveals to the user that where is he/she staying on the website or blog. Breadcrumb comes from a tale in which the two title children drop breadcrumbs to form a trail back to their home page. This breadcrumb code will display on any label/category and single post and landing page of blogger BlogSpot templates and templates WordPress.

In this tutorial, Blog Supporter will share you how to add this Breadcrumb Wrapper to your blog template. To add this breadcrumb you may need to add some HTML to template HTML code area
and CSS Code to your existing blog templates.

This blogger tutorial of breadcrumb navigation is working properly with blogger Blogspot templates only. The WordPress blogs will be able for the another new WordPress tutorials.

What is Breadcrumb Wrapper look like?

The trails like Home >> Label >> Post Name are the bread crumbs.

Warning: before you start this task I would like to recommend you to Backup your blog template avoid any error.

How to make breadcrumbs Wrapper to your blogger

Step 1: Go to blogger.com and login to the dashboard.

Step 2: In your blog dashboard just click on Template then click on Edit HTML.

Step 3: Click anywhere in the HTML Code and press Ctrl + F or Command + F for Mac to search for the <head> tag.

Step 4: Now copy below code and paste below <head> tag.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Note: If your template could not accept this code, you may need to Convert Tool to convert this HTML code then your template will be accepted.

Step 5: Now press Ctrl + F or Command + F for Mac to search for the below code.

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

Step 6: Now after you found the above code just copy this below HTML code and replace it

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

Step 7: Press Ctrl + F or Command + F for Mac again to search for the below code.

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

Step 8: Now copy the below codes and replace the codes you found above.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>



<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>
 <data:post.title/>
</b:loop>


<b:else/>
<b:if cond='data:blog.pageType == "archive"'>



<a expr:href='data:blog.homepageUrl'>Home</a> Archives for <data:blog.pageName/>


<b:else/>
<b:if cond='data:blog.pageType == "index"'>


<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></b:if></b:if></b:if></b:if>
</b:includable>
<b:includable id='main' var='top'>

Step 9: Now you are almost done task how to make breadcrumbs to blogger, just go through with this below steps by press Ctrl + F or Command + F for Mac to search for the ]]></b:skin> tag.

Step 10: Just before it copy this below CSS Code and paste.

/*---[Breadcrumbs Wrapper]----------------*/
.breadcrumbs {
background: #f2f2f2;
padding: 7px 7px 7px 10px;
margin: 0px 0px 15px 20px;
font-size:100%;
line-height: 1.4em;
border-bottom:0px double #e6e4e3;
border-radius: 3px;
}

Step 11: In this last step just review from step 3 to 10, if everything is completed just press Save Template Botton. Then you can view your blog website and enjoy it.

How to Add Breadcrumb Wrapper To Blogger

What is Breadcrumb Wrapper look like?

How to make breadcrumbs Wrapper to your blogger

Best Cambodian Bloggers: List Of Popular Blogs