Home
Blogger

How to Hide and Delete Breadcrumb from Blogger Template?

How to Hide and Delete Breadcrumb from Blogger Template
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. 

14 comments

  1. Thanks tutorial you give, make it easier to understand the template.
    • Welcome Supriyadi..I always try to write within simple word. IF you face any difficulty to understand then feel free to drop comment.
  2. eta delete korlei ki search engine direct post link show korbe??? check my website www.bondua.com please
  3. I want to remove breadcrumbs from my blog, I hope it will help.
    • Your template hasn't any breadcrumbs..
  4. This comment has been removed by a blog administrator.
    • 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
  5. 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
    • 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.
  6. 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
  7. 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. :)
  8. Thank you, Rabbi Khan.
    Now it's clear, more or less.
    Take care,
    Igor
  9. Searching for this so long hope it will work
    • Hi,
      Thanks for your comment. This will work 100%.

      But if you face any problem then feel free to leave a comment here.
Go Up