You Are Here : Home » , » How To Insert Breadcrumb In Blogger

How To Insert Breadcrumb In Blogger

Hey users, Welcome to H&T. I am sharing lots of Trick for Blogger. All those tricks is completely different from each other. Today, I am going to share how to implement breadcrumb or breadcrumb trail in Blogger. Before we proceed to the tutorial we must know what breadcrumb is and why should you add breadcrumb in Blogger.

How To Insert Breadcrumb In Blogger
Breadcrumb

Breadcrumb is a type of navigation which is used in the user interface. It helps the users and the administrator to keep track of the website data. If you will insert breadcrumb in your Blog or Website than your users will be able to easily locate your site. It will make your blog more user friendly and anything that is good for user will also improve your site performance.
Typical Breadcrumb look like this:
Home > Section > Subsection

In Blogger it will look something like below:
Home > Label name > Post name
I have also inserted Breadcrumb in my Website. Have a look below my navigation or above post heading. It will not take much place in your Blog. Also, see the image below:

How To Insert Breadcrumb In Blogger
Breadcrumb will look something like this or like your
default template style

Now that you have learned something about Breadcrumb. Let's  proceed to the tutorial further.

Insert Breadcrumb In Blogger

First and the most important things. Don't forget to Backup your template. It will really help you if by chance you destroy your template. Now that you have backup your template. Let's see the detailed process to insert breadcrumb in Blogger.
  • Go to Blogger Home. Sign in to your Blogger account.
  • After that you have to go to Blogger Dashboard.
  • Tan go to Template and click on edit html. You will see edit html below the live preview of your Blog in Template page.
  • Now search for the code below:
<b:include data='top' name='status-message'/>

  • Now paste the code given below just above that.
<b:include data='posts' name='breadcrumb'/>

  • Let's proceed to the next step. Now search for the code given below:
<b:includable id='main' var='top'>

  • It can be available at two places. If the above code is available at two places than choose the second one. If you have only one than you have to choose the first one.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Note: In the above code I have added to show only one label in the Breadcrumb. If you want to show all the labels than delete/remove the two lines that I have marked Blue and now save the Template
  • Now, save the template. You have just inserted breadcrumb in your Blogspot Blog.

Customize Breadcrumb In Blogger

As I said above, breadcrumb increases user experience with your blog. Customizing your Blog also help in improving users experience. So, I have a another trick for breadcrumb. I will show you how to customize the breadcrumb in blogger. I will provide you two awesome looking Breadcrumb for your Blogger Blog and don't forget you can customize it extesively if you want to. Have you seen the breadcrumb of Google. If not have a look at the Gmail help page or see the image below:

Add Google Like Breadcrumb In Blogger

So, want breadcrumb that will look like above image. Follow these steps carefully:

Add Google Like Breadcrumb In Blogger

As I said always before every customization don't forget to backup your template. I am 100% sure it will not affect your template rather than customizing your breadcrumb. Follow below steps to customize.
  • Go to Blogger Home.
  • Than go to Dashboard.
  • After that you have to go to the layout section.
  • Now in the layout page click on template designer.
  • In the template designer click on advanced. Here you will see a section "Add custom Css". Just add the code given below in the custom Css box to get the Google like breadcrumb for Blogger.
.breadcrumbs a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-position: 100% 0;
    background-repeat: no-repeat;
    border-color: #D9D9D9;
    border-image: none;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    color: #666666;
    display: block;
    float: left;
    font-size: 95%;
    padding: 7px 16px 7px 19px;
    position: relative;
    text-decoration: none;
    z-index: 1;
}
.breadcrumbs a:hover {
    border-bottom-color: #C4C4C4;
    border-top-color: #C4C4C4;
    box-shadow: 0 2px 2px #E8E8E8;
    color: #333333;
}
.breadcrumbs a:first-child, .breadcrumbs a:first-child:hover {
    border-top-left-radius: 5px;
    z-index: 30 !important;
}.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }
  • Click on Apply To Blog..
  • Done. Now you will have Google like breadcrumb in your Blogger Blog.
Don't like Google like Trail. Want different looking Breadcrumb for your Blogger blog. Than I have another style for you which is little better than Google's. I have designed a unique breadcrumb for Blogger Blog. The breadcrumb style that I will give the code to you have many unique effects and also you can customize it if you know little CSS. It's based on CSS3. The procedure to insert this Breadcrumb style is same as I explained in the above tutorial on Customizing Google Like Breadcrumb in Blogger. I give the name to the below Breadcrumb style as HT-Style Breadcrumb V.1.0. It exactly look like mine Style with little Padding effect on Mouse Hover. You can also remove this padding effect to make it look just like mine Breadcrumb Style. Let me show you the code.
  • Go to Blogger Home and sign i with your Google/Blogger Account.
  • Than go to Dashboard Section.
  • After that you have to go to the layout section of your Blogger Blog.
  • In the layout section you will see a link to Template Designer. Go to Template Designer.
  • In the template designer click on advanced. Here you will see a section "Add custom Css". Just add the code given below in the custom CSS box to get this HT-Style Breadcrumb V.1.0 for Blogger.
.breadcrumbs {
font: 11px; Arial, Helvetica, sans-serif;
background-image:url('https://lh5.googleusercontent.com/-qQzaXMuxZPg/UmUvG5E8YqI/AAAAAAAAA7A/SuFJWLepcms/h120/bc_bg.png');
background-repeat:repeat-x;
height:30px;
line-height:30px;
color:#808080;
border:solid 1px #cacaca;
width:97.082%;
overflow:hidden;
margin:0px;
padding: 0 8px;
}
.breadcrumbs a {
height: 30px;
background-image: url(https://lh5.googleusercontent.com/-Sq3KM59jkiI/UmUvG8bIJhI/AAAAAAAAA7E/jaCYMHVy9-Q/h120/bc_separator.png);
background-position: 100% 0;
background-repeat: no-repeat;
border-color: #cacaca;
border-image: none;
border-style: solid;
border-width: 0px 0 0px 0px;
color: #454545;
align:center;
display: block;
float: left;
font-size: 80%;
padding-right: 10px;
position: relative;
text-decoration: none;
z-index: 1;
}
.breadcrumbs a:hover {
color: #292832;
text-shadow:3px 3px 3px;
border-bottom-color: #C4C4C4;
border-top-color: #C4C4C4;
box-shadow: 0 2px 2px #E8E8E8;
padding: 0 8px;
color: #292832;
}
.breadcrumbs a:active {
color: #FF0000;
text-shadow:3px 3px 3px;
border-bottom-color: #C4C4C4;
border-top-color: #C4C4C4;
box-shadow: 0 2px 2px #E8E8E8;
color: #FF0000;
}
.breadcrumbs a:first-child, .breadcrumbs a:first-child:hover {
border-top-left-radius: 5px;
z-index: 30 !important;
}.breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:90%;
}
  • Now Click On Apply To Blog. That's It. The new and cool Breadcrumb style has just been added to your Blogger Blog.
Hope this tutorial helped you. If you have any question than don't hesitate to Contact me through Contact form or do the comment below.
If you want to receive quality tutorial at your e-mail than you can subscribe to our free newsletter.


Ads by Google
If you enjoyed reading this article then please leave a comment or subscribe to our newsletter to get all the future posts delivered to your feed reader or you email desk.

No comments:

Leave a Reply

Welcome to SpicyTweaks.

Copyright © 2013-17 SpicyTweaks. All Rights Reserved.

Scroll to top