How to Hide and Delete Breadcrumb from Blogger Template?

Breadcrumb is useful for navigating sub-categories to parent category and home page. So this play an important role for making a Blog user friendly. However Breadcrumb is not suitable for all kinds of Blog. It's importance varies according to template niche. However many Blogger wants to remove Breadcrumb from their Blogger template. From my point of view hiding is better than completely removing Breadcrumb. Because if you feel in future that Breadcrumb is useful and should include in your Blogger template then  you can simply again display the Breadcrumb. So in this tutorial I will show you how we can hide and display Breadcrumb in Blogger template.

How to Hide breadcrumb from Blogger template?

For hiding the breadcrumb from Blogger template Please follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy the code from below and Paste the code above/before </b:skin> 

.breadcrumbs{display:none !important;}
or
.breadcrumb{display:none !important;}

Step 5 Now simply hit the Save template Button. 

Now check your Blogger template and see that you template Breadcrumb is not showing anymore. However If you want to display the Breadcrumb again then simple remove the added code .breadcrumbs{display:none !important;} and save your template. that's it. Your template Breadcrumb will display again.

How to Delete breadcrumb from Blogger template?

So this is very simple to hide Breadcrumb. But we can completely remove Breadcrumb from our Blogger template. Just follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the below by pressing Ctrl+F (Windows) or CMD+F (Mac)  

.breadcrumb {border-bottom:1px solid #E2E2E2;height:24px;overflow:hidden;margin:0 0 20px;font-size:86%;font-weight:bold}
.breadcrumb li{float:left}
.breadcrumb li a,.breadcrumb li span{display:block;height:24px;line-height:24px;padding:0 10px}

Step 4 Now delete the whole code block.

Step 5 Now simply hit the Save template Button. 

Note that the code won't be exactly like above it will vary according to design. But in my designed  Blogger template I have used the code like above.  But focus on ".breadcrumb" which is the beginning code of breadcrumb. If you are following this process then you won't able to recover your breadcrumb code again. But if you have a backup then you can include it again.