Tạo đường dẫn cho bài viết trong blog

Bước 1: Chỉnh sửa HTML
Vào Thiết kế > Chỉnh sửa HTML và check vào ô chọn Mở rộng tiện ích mẫu để 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.

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 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 2: 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:

.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à xem kết quả. Chúc các bạn thành công

Share Share Share

Thủ thuật