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

Cùng với nhiều tính năng mà một website cần có, thì breadcrumb luôn luôn là sự lựa chọn cần thiết cho việc xây dựng trang web thân thiện hơn với người dùng. Vì nó giúp khách viếng thăm blog của bạn dễ dàng điều hướng đến nội dung mà họ muốn tới. Trước đây mình đã giới thiệu bài viết Từng bước tạo Breadcumbs cho trang blogspot . Hôm nay mình sẽ giới thiệu thêm cho việc hiển thị breadcrumb trên blog của các bạn, từ đó các bạn sẽ có thêm nhiều lựa chọn hơn cho blog của mình.

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 :

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

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

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

<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'>
                             
                     <b:else/>
          <b:if cond='data:blog.pageType == &quot;item&quot;'> <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;'>
                                       
                                      <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-awidth: 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.

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

Chuyên Mục: Blogspot

Bài viết được đăng bởi webmaster