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.
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).
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:
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 == "item"'>
<div class='breadcrumbs'>
Browse » <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 == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a
expr:href='data:blog.homepageUrl'>Home</a> » Archives
for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Browse » <a
expr:href='data:blog.homepageUrl'>Home</a> » 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:
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> padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
Cuối cùng bạn save và xem kết quả. Chúc các bạn thành công
0 nhận xét:
Hãy để lại nhận xét một cách văn minh nhé !!!