Chèn Breadcrumbs theo phong cách Google vào trong Blogspot

Breadcrumbs

1 Đăng nhập vào  Blogger Dashboard.

2 Vào Template -> Edit HTML
3 Nhấn Ctrl + F rồi tìm đoạn code sau :

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

Sau đó copy đoạn code bên dưới và dán vào ngay sau đoạn code tìm thấy.

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

4 Tiếp tục tìm đoạn code sau :

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

Rồi copy đoạn code bên dưới và dán 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.netoopsblog.blogspot.com"></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>

5  Tìm  ]]></b:skin> rồi copy và dán đoạn code bên dưới bên trên nó.

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

    }

Thế là xong, bây giờ các bạn có thể tự kiểm tra kết quả . Mình hy vọng là các bạn sẽ thích với phong cách breadcrumb như thế này.