Breadcrumbs phong cách cho Blogspot

Breadcrumbs là một phần quan trọng trong việc theo dõi vị trí của bài viết. Tôi nghĩ bạn đã nhìn thấy nó trong các site thương mại điện tử lớn như Ebay, myntra,yebhi. Họ sử dụng Breadcumbs để xác định sản phẩm nằm trong các thư mục riêng.

Sau đây là bài hướng dẫn thêm Breadcrumbs phong cách cho Blogspot

Đăng nhập vàoBlogger và tới tạc vụ chỉnh sửa HTML Template.

Bước 1: Nhấn tổ hợp phím Ctrl + F để Tìm đoạn Code sau:

<b:include data='top' name='status-message'/>

Copy đoạn code dưới đây vào sau nó:

     <b:include data='posts' name='breadcrumb'/>

Bước 2: Tìm đoạn code dưới đây:

     <b:includable id='main' var='top'>

Copy đoạn code dưới đây bên trên nó:


<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.nguyenvietanh.net"></a><p class='breadcrumbs'> <span class='post-navigation'><a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
                                        <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;'>
                                               
                                                <a expr:href='data:label.url' rel='tag'>
                                                  <data:label.name/>
                                                </a>
                                              </b:if>
                                            </b:loop>
                                            <b:else/>
                                            Unlabelled
                                          </b:if>
                                          <span>
                                            <data:post.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>


Bước 3: Tìm ]]></b:skin> và copy CSS một trong những loại Breadcrumbs dưới đây lên trên thẻ vừa tìm.

Style 1:

 .breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}
.post-navigation > a:after, .post-navigation > a:before {
    border-bottom: 13px solid transparent;
    border-left: 11px solid #B7B7B7;
    border-top: 13px solid transparent;
    content: "";
    display: inline-block;
    left: 100%;
    position: absolute;
    top: -2%;
    z-index: 1;
}
.post-navigation > a:after {
    border-left-color: #F2F2F2;
    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 {
    padding-left: 14px;
}

 Style 2: Google Type

.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%;
    }

 Style 3: Wood Type

  .breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }
    .post-navigation > a {
        background: url("http://i.imgur.com/qJ9sJ2N.jpg") no-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;
    }

 Style 4: Blue Type

.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;

    }

Chúc các bạn thành công !