Tạo thanh trạng thái "breadcrumb" cho Blogger

Thanh trạng thái “Breadcrumb” là thanh hiển thị trên đầu mỗi bài viết để chỉ cho bạn đọc biết vị trí của bài viết nằm trong thư mục nào, hay nói một cách khác “Breadcrumb” chính là đường dẫn của bài viết.
Vậy đường dẫn bài viết thế nào?. Các bạn có thể hiểu rõ hơn với hình ảnh minh họa dưới:

Bước 1: Lưu lại mẫu template của bạn
Vào “Layout” > “Edit HMTL”. Download mẫu template để dự phòng trường hợp xấu nhất xảy ra (Đây là bước cần thiết cho bất kỳ trường hợp thêm các tiện ích, thủ thuật khi can thiệp vào các mã code trong mẫu Blogger).

Bước 2: Expand the widget code
Sau khi đã lưu lại mẫu bạn vào “Layout” > “Edit HMTL” và check vào ô chọn Expand Widget Templates để hiển thị  XML-code mẫu Blog của bạn để tiến hành các bước tùy chỉnh mã tiện ích widget của mẫu.
Thông thường  widget mặc định  như vậy  gọi là "includable" (một phần của code) để hiển thị  trạng thái của bài viết “status-message“ trên bài viết khi bạn chọn lựa bài viết hiển thị theo label hay catergory.
Chúng ta sẽ tắt “status message” mặc định và thay thế chúng bằng thanh trạng thái breadcrumbs.

Bây giờ bạn tìm đoạn mã dưới:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>

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

    <data:adStart/>

Vô hiệu hóa code mặc định “status message” bằng thủ thuật thêm dấu ngoặc <!—…—>


bao quanh chúng như dưới. (Bạn cũng có thể xóa dòng code này, nhưng theo ý của tôi thì bạn vô hiệu hóa code đó bằng thủ thuật trên thì hay hơn để có thể theo dõi và gỡ lỗi trong trường hợp xấu).

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
  <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <data:adStart/>

Thêm dòng mã:

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

Vào dưới code đã được vô hiệu hóa như sau:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
  <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

Thêm đoạn code màu đỏ ở dưới vào trên <b:includable id='main' var='top'> như dưới:

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
  <!-- No breadcrumb on front page -->
  <b:else/> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
       <div class='breadcrumbs'> 
         Browse &#187;  <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;'> &#187; 
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
               </b:if> 
             </b:loop> 
             &#187; <span><data:post.title/></span> 
           </b:if> 
         </b:loop>
       </div> 
    <b:else/> 
      <b:if cond='data:blog.pageType == &quot;archive&quot;'> 
        <div class='breadcrumbs'> 
          Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/> 
        </div> 
      <b:else/> 
        <b:if cond='data:blog.pageType == &quot;index&quot;'> 
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
          <b:else/>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/> 
          </b:if>
          </div> 
        </b:if> 
      </b:if>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='main' var='top'>

Bước 3: Thêm CSS vào <b:skin>


Tìm đoạn mã ]]></b:skin> và thêm ngày trước nó đoạn mã code như dưới

<b:skin><![CDATA[/*

....

.breadcrumbs {

padding:5px 5px 5px 0px;


  margin: 0px 0px 15px 0px;


font-size:95%;


  line-height: 1.4em;


border-bottom:3px double #e6e4e3;


}

....

]]></b:skin>

Cuối cùng bạn save và thưởng thức thanh thông báo trạng thái với blog mà bạn vừa thực hiện với 3 bước đơn giản trên.


Và đừng quên comment và click quảng cáo nếu thấy có sản phẩm phù hợp với nhu cầu mua sắm của bạn