Tạo Breadcrumbs cho Blog đơn giản




Breadcrumbs tập hợp các đường liên kết phân cấp giúp người dùng có thể biết được mình đang ở trang nào và giúp ddieu hướng trang wed thuận tiện hơn .Breadcrumbs là một thành phần rất quan trọng trong hệ thống điều hướng của website gần như vào bất cứ website nào bạn cũng thấy sự hiện diện của nó.




Bước 1: Bạn đăng nhập vào blog > Chủ Đề > Chỉnh sửa HTML 

Bước 2: Tìm đến đoạn code bên dưới


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

Và thêm vào dưới nó đoạn code sau :

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


Bước 3: Tìm đến đoạn code sau đây:


<b:includable id='main' var='top'>

Và thêm đoạn code sau  trên nó :

<b:includable id='breadcrumb' var='posts'>      
<b:if cond='data:blog.homepageUrl == data:blog.url'>       
<!-- No breadcrumb on home page -->       
<b:else/>       
<b:if cond='data:blog.pageType == "item"'>       
<!-- breadcrumb for the post page -->       
<p class='breadcrumbs'>
<span class='post-labels'>       
<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>       
<b:else/>       
»Unlabelled       
</b:if>       
» <span><data:post.title/></span>       
</b:loop>       
</span>       
</p>
<b:else/>       
<b:if cond='data:blog.pageType == "archive"'>       
<!-- breadcrumb for the label archive page and search pages.. -->       
<p class='breadcrumbs'>
<span class='post-labels'>       
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>       
</span>       
</p>
<b:else/>       
<b:if cond='data:blog.pageType == "index"'>       
<p class='breadcrumbs'>
<span class='post-labels'>       
<b:if cond='data:blog.pageName == ""'>       
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts       
<b:else/>       
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>       
</b:if>       
</span>       
</p>
</b:if>       
</b:if>       
</b:if>       
</b:if>       
</b:includable> 



Bước 4: Cuối cùng chèn đoạn code sau vào trước thẻ đóng ]]></b:skin>

.breadcrumbs {      
padding:5px 5px 5px 0px;       
margin: 0px 0px 15px 0px;       
font-size:95%;       
line-height: 1.4em;       
border-bottom:3px double #e6e4e3;       
}

Bước 5: Save Templeate lại và xem thành quả .

Cảm ơn bạn đã đọc bài viết tại
Smobile36 !

Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục.
Không chèn liên kết quảng cáo, spam khi đăng nhận xét.
Các bạn có thể thoải mái góp ý cho mình .

Post a comment

Cảm ơn bạn đã đọc bài viết tại
Smobile36 !

Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục.
Không chèn liên kết quảng cáo, spam khi đăng nhận xét.
Các bạn có thể thoải mái góp ý cho mình .

Post a Comment (0)

Bài Trước Bài Sau

Oops!! CÓ VẺ NHƯ BẠN ĐANG BẬT CHẶN QUẢNG CÁO

Quảng cáo giúp chúng tôi duy trì website và tiếp tục chia sẻ các thủ thuật đến bạn.

Bạn Vui lòng tắt Adblock hoặc cho Hoàng Trang Pc được phép hiển thị trong công cụ chặn quảng cáo của bạn.Xin Cảm ơn!

×