Tạo thanh điều hướng Breadcrumbs có thứ bậc Label cho Blogger

Breadcrumbs là thanh điều hướng được sử dụng để hiển thị thứ bậc label trong một trang web/blog. Nó giúp cho người đọc biết được mình đang ở đâu trong trang web (đang đọc bài trong mục nào). Thông thường đặt ở đầu blog tốt hơn là ngay trên bài đăng hoặc tiêu đề chính của một trang bài viết. Trong Blogger không có thư mục con thực sự mà bạn có thể hiển thị một đường dẫn phân cấp, nhưng ta có thể sử dụng các Nhãn như là một thư mục con. Bài này sẽ hướng dẫn làm thế nào để hiển thị một hoặc nhiều label trong Breadcrumbs và cách làm cho chúng xuất hiện trong "Kết quả tìm kiếm" của Google bằng cách sử dụng kỹ thuật Microdata.

Ảnh minh họa

☼ Cách tiến hành:

1. Đăng nhập vào Blog

2. Vào Mẫu (Template)

3. Chọn Chỉnh sử HTML

4. Tìm đoạn: <div class='blog-posts hfeed'>


- Và thêm vào sau nó mã sau:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
      <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
      <a expr:href='data:blog.url'> <span itemprop='title'><data:blog.pageName/></span> </a>
    </div>
 <b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:loop values='data:posts' var='post'>
       <b:if cond='data:post.labels'>
         <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
           <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == &quot;true&quot;'>
             <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
             </b:if>
           </b:loop>
          </div>
         <b:else/>
          <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
           <a href='#'><span> Unlabelled</span></a>
         </div>
       </b:if>
     </b:loop>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
       <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
       <a expr:href='data:blog.url'><span>Archives for <data:blog.pageName/></span></a>
      </div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <b:else/>
       <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
        <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
        <a expr:href='data:blog.url'><span itemprop='title'>Posts filed under <data:blog.pageName/></span></a>
       </div>
     </b:if>
    </b:if>
   </b:if>
  </b:if>
 </b:if>
</b:if>

- Nếu tìm thấy nhiều đoạn <div class='blog-posts hfeed'> mà bạn không biết thêm vào chỗ nào thì có thể  thay nó dưới code này: <b:includable id='main' var='top'>

5. Thêm CSS sau vào trước thẻ ]]></b:skin>

/* Breadcrumbs
---------------------------------------------------------*/
.breadcrumbs {
  background: url("http://4.bp.blogspot.com/-nMV4Sjs0XqE/UX-phKlumUI/AAAAAAAAAKs/v_GDHbVpkyo/s1600/breadcrumbs_bg.png") repeat scroll 0 0 transparent;
  list-style: none;
  margin-bottom: 10px;
}
.breadcrumbs  a {
  background-image: url("http://4.bp.blogspot.com/-nMV4Sjs0XqE/UX-phKlumUI/AAAAAAAAAKs/v_GDHbVpkyo/s1600/breadcrumbs_bg.png");
  background-position: 100% 0;
  background-repeat: no-repeat;
  color: #666666;
  display: inline-block;
  font-size: 12px;
  height: 29px;
  line-height: 29px;
  margin-right: -20px;
  padding: 0 25px;
  position: relative;
  text-decoration: none;
  vertical-align: top;
  z-index: 1;
}
.breadcrumbs  a:hover   {
  background-position: 100% -48px;
  color: #333;
}
.breadcrumbs .first , .breadcrumbs .first:hover {z-index: 30 !important;}
.breadcrumbs .first span {
  background-image: url("http://4.bp.blogspot.com/-nMV4Sjs0XqE/UX-phKlumUI/AAAAAAAAAKs/v_GDHbVpkyo/s1600/breadcrumbs_bg.png");
  display: inline-block;
  height: 29px;
  margin-left: -25px;
  padding-left: 12px;
  z-index: 12 !important;
}
.breadcrumbs a:nth-child(2) {z-index:29 !important;}
.breadcrumbs a span:hover {
  background-position: 0 -48px;
  color: #333;
}

6. Lưu lại là xong!

- và Bây giờ Breadcrumbs đã xuất hiện trong trang bài đăng, trang Label, trang Lưu Trữ cũng như các trang tĩnh.

Một số tùy chọn hiển thị một hoặc nhiều nhãn (label)


Đoạn mã trên chỉ cho thấy 1 Label, Trong trường hợp bài viết của bạn có gán nhiều nhãn mà bạn muốn hiển thị tất cả các nhãn trên thanh Breadcrumbs thì hãy bỏ dòng tô màu xanh trong Bước 4 và thêm CSS sau vào trước thẻ ]]></b:skin>

.breadcrumbs a:nth-child(3) {z-index:28 !important;}
.breadcrumbs a:nth-child(4) {z-index:27 !important;}
.breadcrumbs a:nth-child(5) {z-index:26 !important;}
.breadcrumbs a:nth-child(6) {z-index:25 !important;}
.breadcrumbs a:nth-child(7) {z-index:24 !important;}
.breadcrumbs a:nth-child(8) {z-index:23 !important;}
.breadcrumbs a:nth-child(9) {z-index:22 !important;}
.breadcrumbs a:nth-child(10) {z-index:21 !important;}
.breadcrumbs a:nth-child(11) {z-index:20 !important;}
.breadcrumbs a:nth-child(12) {z-index:19 !important;}
.breadcrumbs a:nth-child(13) {z-index:18 !important;}

Done! Hãy thưởng thức thành quả bạn đạt được nhé.