How to Hide and Delete Breadcrumb from Blogger Template?

How to Hide and Delete Breadcrumb from Blogger Template

Comments: 12
data:blog.title
remove Breadcrumb

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. 

Speak Your Mind

Supriyadi Pro says: 2/08/2015

Thanks tutorial you give, make it easier to understand the template.

Mohammad Fazle Rabbi says: 2/08/2015

Welcome Supriyadi..I always try to write within simple word. IF you face any difficulty to understand then feel free to drop comment.

Abdul Kadir says: 7/23/2015

eta delete korlei ki search engine direct post link show korbe??? check my website www.bondua.com please

SSLC Kerala says: 4/03/2016

I want to remove breadcrumbs from my blog, I hope it will help.

Mohammad Fazle Rabbi says: 4/03/2016

Your template hasn't any breadcrumbs..

GEETHA says: 1/16/2017
This comment has been removed by a blog administrator.
Anonymous 11/23/2017

Hey,
I'd like to hide the breadcrumb from my blogger blog. I did follow your advise but that didn't help - got two breadcrumbs instead of one.
Please check up on your code.
Igor.
igor.evgen@yahoo.com
http://igor.worthyofpraise.org
http://igorevgen.blogspot.com

Anonymous 11/30/2017

Hello,
Sorry, your advise as for how to hide a breadcrumb didn't work - the site view got even worse and breadcrumb remained. Had to reverse all back.
Your advise how to remove a breadcrumb also didn't work since the template hasn't the "breadcrumb" term at all.
Any other idea?
Thank you.
Igor

Rabbi Khan says: 12/06/2017

Hi Igor Evgen ^_^
In Which theme you have applied my script? I just checked your site.You are using Contempo Blogger theme. This theme doesn't have breadcrumb script.

Igor Evgen says: 12/06/2017

Hi Rabbi Khan!
Thanks for your answer. Well, you know better, as you are better qualified. Yet, the question remains, even how to remove the breadcrumb, whether it's there in the theme or not.
I did try to apply your script to that theme. Guilty as charged. What now?
Kindly tell me your opinion.
Thanks again, Igor

Rabbi Khan says: 12/07/2017

Hi Igor :as
It depends on Blogger theme. Different developer write script different way. Your blogger theme doesn't have any breadcrumb feature. You can see my theme's breadcrumb script from below code block. You can see my theme's breadcrumb at the above of Post title of this page.


<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
You are here: <span class='homex' typeof='v:Breadcrumb'><a href='http://www.bloggerspice.com/' property='v:title' rel='v:url'> Home</a>
</span>
<span class='breadlabel' typeof='v:Breadcrumb'><a href='http://www.bloggerspice.com/search/label/Blogger?&amp;max-results=6' property='v:title' rel='v:url'>Blogger</a>
</span>
<span class='breadlabel'>How to Hide and Delete Breadcrumb from Blogger Template?</span>
</div>


But the above script is not same in all theme. if you edit any other theme you will see breadcrumb script different way. But some theme developer write script jointly with other widget for compressing the CSS script. So in that case removing breadcrumb is so tough, because you have to scrutinize the whole theme script carefully.

Hope you will understand. Thank you. :)

Igor Evgen says: 12/07/2017

Thank you, Rabbi Khan.
Now it's clear, more or less.
Take care,
Igor

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *