Aug 13, 2016

Customized Google Type Stylish Breadcrumbs! Add to Blogger

data:blog.title
Blogger Breadcrumbs, Google Type Breadcrumbs, Add Breadcrumbs, Blogspot Breadcrumbs ,Blogger Breadcrumb Styles
Breadcrumbs are a simple navigation tool used in user interface. The breadcrumb allow a user to keep track their location and to understand where they are on your blog. Generally, Breadcrumbs appear horizontally across the top of web page, just before or below of Post title. You can also find an example of breadcrumb in our blog just below/after of Post title. See the screenshot to know, what actually are a breadcrumbs. :)

Blogger Breadcrumbs, Google Type Breadcrumbs, Add Breadcrumbs, Blogspot Breadcrumbs, How Add Breaddcrumbs, Add Blogger Crumbs, Add Blogspot Breadcrumbs

I think you had seen this in e-commerce sites like ebay, myntra, flipkart. They used breadcrumbs to identify a product is in which category. Its just like a Home link followed by the category belongs and then the current location/current post.

Typically Breadcrumbs looks like this:

Home >> Category >> Post Title

We hope you learned that what actually are a breadcrumbs. Now proceed to the tutorial and learn, How To Add Stylish Breadcrumbs to Blogger Blog?

Also Read:
  1. Blogger Contact Form Gone Viral! Never Seen Before.
  2. Cute & Stylish Popup Email Subscribe Box For Blogger.
  3. Three Stylish Styles to Make Youtube Embedded Videos Responsive.

Add Google Type Stylish Breadcrumb Style to Blogger

Note: Before doing any customization in blogger template must backup your blogger 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.

 Step 1* Add HTML Part

  • Go to Blogger >> Template >> Edit HTML.
  • Search for below tag using CTRL+F in windows and CMD+F in Mac.
 <b:include data='top' name='status-message'/>
  •  Now, Paste below code just after of this above tag.
<b:include data='posts' name='breadcrumb'/>
  • Again search for below tag.
 <b:includable id='main' var='top'>
  • Now, Paste below code just above of it.
 <b:includable id='breadcrumb' var='posts'>
                                <b:if cond='data:blog.homepageUrl == data:blog.url'>
                            <!-- No breadcrumb on home page -->
                     <b:else/>
          <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><a href="http://www.mybloggerguides.com/2016/08/add-google-type-breadcrumbs-blogger.html"></a><p class='breadcrumbs'> <span class='post-navigation'><a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
                                        <b:loop values='dataosts' var='post'>
                                          <b:if cond='dataost.labels'>
                                            <b:loop values='dataost.labels' var='label'>
                                              <b:if cond='data:label.isLast == &quot;true&quot;'>
                                                <a expr:href='data:label.url' rel='tag'>
                                                  <data:label.name/>
                                                </a>
                                              </b:if>
                                            </b:loop>
                                            <b:else/>
                                            Unlabelled
                                          </b:if>
                                          <span>
                                            <dataost.title/>
                                          </span>
                                        </b:loop>
                                      </span>
                                    </p>
                                    <b:else/>
                                    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                                      <!-- breadcrumb for the label archive page and search pages.. -->
                                      <p class='breadcrumbs'>
                                        <span class='post-labels post-navigation'>
                                          <a expr:href='data:blog.homepageUrl'>
                                            Home
                                          </a>
                                           Archives for
                                          <data:blog.pageName/>
                                        </span>
                                      </p>
                                      <b:else/>
                                      <b:if cond='data:blog.pageType == &quot;index&quot;'>
                                        <p class='breadcrumbs'>
                                          <span class='post-labels post-navigation'>
                                            <b:if cond='data:blog.pageName == &quot;&quot;'>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               All posts
                                              <b:else/>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               <span>Posts filed under
                                                 <data:blog.pageName/></span>
                                            </b:if>
                                          </span>
                                        </p>
                                      </b:if>
                                    </b:if>
                                </b:if>
                          </b:if>
        </b:includable>

 Step 2* Add CSS Part

In this post we are going to share five breadcrumbs style in which three looks like Google style and other two have decent look with nice background image. Now, Choice is your's. You can add your's one from below screenshots. After Select, Click on CSS button which is available just below of each image. :)
  • Search for ]]></b:skin> tag and paste below code of your choice just above of ]]></b:skin> tag.

Google Type Blogger Breadcrumb Style 1

Blogger Breadcrumbs, Google Type Breadcrumbs, Add Breadcrumbs, Blogspot Breadcrumbs, Google Type Breadcrumb, Blogger Google Type Breadcrumb

CSS Code


Google Type Blogger Breadcrumb Style 2

Blogger Breadcrumbs, Google Type Breadcrumbs, Add Breadcrumbs, Blogspot Breadcrumbs, Google Type Breadcrumb, Blogger Google Type Breadcrumb

CSS Code

Google Type Blogger Breadcrumb Style 3

Breadcrumbs Blogger, Google Type Breadcrumbs, Blogspot Breadcrumbs, Add Breadcrumbs to Blogger


CSS Code

Wooden Type Blogger Breadcrumb Style 4

Blogspot Breadcrumb Style, Blogger Breadcrumbs, Add Breadcrumb to Blogger


CSS Code


Blue Type Blogger Breadcrumb Style 5

Blue Blogger Breadcrumb, Blogspot Breadcrumbs, Add Breadcrumbs To Blogger


CSS Code

Google Type Blogger Breadcrumb Style 1 CSS

/**** Post Breadcrumb Style by mybloggerguides.com****/
.breadcrumbs {
margin: 3.5px 0px -5.5px 0px;
font-size:95%;
}
.post-navigation > a:after, .post-navigation > a:before {
border-bottom: 13px solid transparent;
border-left: 11px solid #B7B7B7;
border-top: 9px solid transparent;
content: "";
display: inline-block;
left: 100%;
position: absolute;
z-index: 1;
}
.post-navigation > a:after {
border-left-color: #f1f1f1;
left: 99%;
}.post-navigation > a:hover {
padding-left: 23px;
}
.post-navigation > a {
background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #b7b7b7;
color: #000000;
padding: 4px 12px;
position: relative;
text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}
.post-navigation > span {
background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #B7B7B7;
color: #000000;
padding: 4px 14px;
position: relative;
text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}

Google Type Blogger Breadcrumb Style 2 CSS

/**** Post Breadcrumb Style by mybloggerguides.com****/ 
    .breadcrumbs a, .post-navigation span {
        -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-color:#d9d9d9;
        border-color: #b7b7b7;
        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:after {
    border-bottom: 13px solid transparent;
    border-left: 11px solid #B7B7B7;
    border-top: 13px solid transparent;
    content: "";
    display: inline-block;
    left: 100%;
    position: absolute;
    top: 10%;
    z-index: 1;
}
 .post-navigation span:before {
    border-bottom: 13px solid transparent;
    border-left: 11px solid #B7B7B7;
    border-top: 13px solid transparent;
    content: "";
    display: inline-block;
    left: 0%;
    position: absolute;
    top: 10%;
    z-index: 1;
}
 .post-navigation span {border-right:1px solid #b7b7b7; }
    .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 {
        z-index: 30 !important;
    }.breadcrumbs {
        margin: 0px 0px 15px 0px;
        font-size:95%;
        }

Google Type Blogger Breadcrumb Style3 CSS

     /**** Post Breadcrumb Style by mybloggerguides.com****/
        .breadcrumbs a, .post-navigation span {
            -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:after{content:'>>';}
     .post-navigation span {border-right:1px solid #b7b7b7;  border-bottom-right-radius: 5px;}
        .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%;
            }

Wooden Type Blogger Breadcrumb Style 4 CSS

 /**** Post Breadcrumb Style by mybloggerguides.com****/
.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }
    .post-navigation > a {
        background: url("http://i.imgur.com/qJ9sJ2N.jpg") repeat scroll 0 0 transparent;
        border: 1px solid #C76A29;
        border-radius: 7px 7px 7px 7px;
        color: #FFFFFF;
        padding: 4px 23px;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 2px #000000;
        transition: all 0.2s ease 0s;
    }
    .post-navigation > span {
        padding-left: 14px;
background: url("http://i.imgur.com/qJ9sJ2N.jpg") repeat scroll 0 0 transparent;
 border: 1px solid #C76A29;
        border-radius: 7px 7px 7px 7px;
        color: #FFFFFF;
        padding: 4px 23px;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 2px #000000;
        transition: all 0.2s ease 0s;
    }

Blue Type Blogger Breadcrumb Style 5 CSS

 /**** Post Breadcrumb Style by mybloggerguides.com****/
.breadcrumbs {
        margin: 0px 0px 15px 0px;
        font-size:95%;
        }.post-navigation > a {
        background: url("http://i.imgur.com/KbrSuUv.jpg") repeat scroll 0 0 transparent;
        border: 1px solid #016DB5;
        border-radius: 8px 8px 8px 8px;
        color: #FFFFFF;
        padding: 4px 26px;
        position: relative;
        text-decoration: none;
        transition: all 0.2s ease 0s;
    } .post-navigation > span {
            padding-left: 14px;
font-weight:bold;
        }

Conclusion:

So above guide is about "How To Add Stylish Breadcrumb Styles in Blogger Blog?" We have share 5 breadcrumbs styles in which three are Google Type Style and other two are attractive style with image background. We hope you enjoyed this article and you have added these breadcrumb widget on your blogger blog without facing any problem. If anyhow problem persist after following all above steps then ask us via dropping a comment below. Do Share.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.