728x90 AdSpace

  • Latest Post

    Friday, June 3, 2016

    How to Add Breadcrumb in Blogger

    How to Add Breadcrumb in Blogger

    How to Add Breadcrumb in Blogger for SEO

    Breadcrumb is the navigation trail which tell about visitors’ location on our site or blog. Means it helps to understand the visitor or reader that at which location of your blog they are. This also helps readers to understand topics related to which category they’re reading.

    Using Breadcrumbs in a blog, has many SEO benefits. The main advantage being that, adding breadcrumbs to your blog will add rich keywords phrases and titles to the link structure of your blog. It also helps to increase your site exposure in search engines by adding keywords into your blog posts

    Typical breadcrumbs look like this:

    Home page > Section page > Subsection page
    or
    Home page : Section page : Subsection page
    or
    home page : section page 1 : section page 2

    Breadcrumb features: 
    breadcrumb
    • Support Google Rich Snippet (you can test at Webmaster Rich Snippet Tool)
    • Support multi label breadcrumb
    • Breadcrumbs for label page
    • Style and compatible (even support IE)
    • Highly optimized and customize.

    Instruction to how to add Breadcrumb in Blogger

    Step 1:Remember back up your template first, then go to Template > Edit HTML > tick Expand widget Templates.
    Step 2:Search for this code if you wanna show breadcrumbs outside post content section, below menu navigation. Add Step 3 code right after that.

    <b:includable id='post' var='post'>

    And search this code if you wanna show breadcrumbs right upper post title. If you find more than one instances of code, then locate the first one and add Step 3 code above that.

    <b:if cond='data:post.title'>

    Step 3: Paste this code below

    <!--Start Breadcrumbs code, get at http://www.icttricks.com-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span class='crumbs'>
    <span class='crust' typeof='v:Breadcrumb'>
    <a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
    <span class='arrow'><span>&gt;</span></span>
    </span>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    <span class='crust' typeof='v:Breadcrumb'>
    <a class='crumb' expr:href='data:label.url' property='v:title' rel='v:url'><span itemprop='title'><data:label.name/></span></a>
    <span class='arrow'><span>&gt;</span></span>
    </span>
    </b:if>
    </b:loop>
    <b:else/>
    Untagged
    </b:if>
    </b:loop>
    <span class='crust'>
    <a class='crumb' expr:href='data:post.url'><span><data:post.title/></span></a>
    <span class='arrow'><span/></span>
    </span>
    </span>
    </div>
    </b:if>
    <!--end -->
    Step 4: Copy the css below after <head>

    <!--Breadcrumb CSS get at http://www.icttricks.com--->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /* Post Breadcrumb
    ----------------------------------------------- */
    .breadcrumb {
    background:#F7F7F7;
    border:1px solid #eaeaea;
    width:100%;
    margin:10px;
    font-size:10px;
    text-transform:uppercase;
    overflow:hidden;
    position:relative;
    bottom:10px;
    margin-left:0
    }
    
    .breadcrumb a,.breadcrumb a:visited {
    color:#222;
    font-family:Arial,sans-serif
    }
    
    .breadcrumb .boardTitle {
    display:none
    }
    
    .breadcrumb .crust {
    display:block;
    float:left;
    position:relative
    }
    
    .breadcrumb .crust a.crumb {
    background-color:#f1f1f1;
    display:block;
    height:24px;
    line-height:24px;
    margin-bottom:0;
    outline:0 none;
    padding:0 10px 0 18px;
    text-decoration:none
    }
    
    .breadcrumb .crust:first-child a.crumb {
    padding-left:10px
    }
    
    .breadcrumb .crust:last-child a.crumb {
    background-color:#e7e7e7;
    font-weight:bold
    }
    
    .breadcrumb .crust:last-child .arrow span {
    border-left-color:#e7e7e7!important
    }
    
    .breadcrumb .crust .arrow {
    -moz-border-bottom-colors:none;
    -moz-border-left-colors:none;
    -moz-border-right-colors:none;
    -moz-border-top-colors:none;
    border-color:transparent black transparent #BBBBBB;
    border-image:none;
    border-style:solid none solid solid;
    border-width:12px 1px 12px 12px;
    display:block;
    height:0;
    position:absolute;
    right:-12px;
    top:0;
    width:0;
    z-index:5;
    }
    
    .breadcrumb .crust .arrow span {
    -moz-border-bottom-colors:none;
    -moz-border-left-colors:none;
    -moz-border-right-colors:none;
    -moz-border-top-colors:none;
    border-color:transparent black transparent #f1f1f1;
    border-image:none;
    border-style:solid none solid solid;
    border-width:12px 1px 12px 12px;
    display:block;
    height:0;
    left:-13px;
    overflow:hidden;
    position:absolute;
    text-indent:9999px;
    top:-12px;
    #ffffff-space:nowrap;
    width:0;
    z-index:6;
    -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    -ms-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out
    }
    
    .breadcrumb .crust:hover a.crumb {
    background-color:#e7e7e7;
    color:#222;
    -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    -ms-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out
    }
    
    .breadcrumb .crust:hover .arrow span {
    border-left-color:#e7e7e7;
    -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    -ms-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out
    }
    
    a.loadpost {
    width:100%;
    display:block;
    padding:8px;
    border:2px solid #cdcdcd;
    color:#222;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Oswald,open sans, sans-serif,arial;
    font-weight:400;
    font-size:16px
    }
    
    a.loadpost:hover {
    border:2px solid #ff9900;
    color:#fff;
    background-color:#ff9900
    }
    </style>
    </b:if>
    <!--end -->
    Also Read
    • Blogger Comments
    • Facebook Comments

    0 comments:

    Post a Comment

    Item Reviewed: How to Add Breadcrumb in Blogger Rating: 5 Reviewed By: Mark John Dee
    Scroll to Top