Trang chủ \ \ \

Tạo đường dẫn breadcrumb cho Blogger/Blogspot


Thanh điều hướng breadcrumbs xuất hiện nằm ngang trên đầu trang web, thường nằm dưới hoặc trên tiêu đề bài viết. Chúng cung cấp đường dẫn trở lại trang trước, đến một chủ đề nào đó hoặc trở về trang chủ. Nhìn chung người thiết kế thường sử dụng các dấu phân cách như > hoặc ».

Thanh điều hướng breadcrumbs điển hình trông như thế này:

Trang Chủ » Thủ thuật Blogger » Tạo đường dẫn breadcrumb cho Blogger/Blogspot

Bước 1:

- Lưu Template hiện tại của bạn.
- Đăng nhập >> Thiết kế (Design) >> Chỉnh sửa HTML( Edit HTML) >> Đánh dấu chọn Mở rộng Mẫu tiện ích(Expand Widget Template).

Bước 2: Thêm CSS:
Tìm ]]></b:skin> (Ctrl + F >> ]]>) và thêm ngay trước nó đoạn mã:

.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 3:

- Tìm đoạn mã (Ctrl + F để tìm ):
<b:include data='top' name='status-message'/>
Thêm ngay dưới nó đoạn mã :
<b:include data='posts' name='breadcrumb'/>
- Tìm tiếp :
<b:includable id='main' var='top'>

Và thêm trước nó đoạn mã:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- khong hien thi breadcrumb o trang chu -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb cho bai dang -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Trang Chủ</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>
<b:else/>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb cho nhan, trang tim kiem, luu tru blog.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Trang Chủ</a> &#187;
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Trang Chủ</a> &#187;
<b:else/>
<a expr:href='data:blog.homepageUrl'>Trang Chủ</a> &#187;
<data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Bấm chọn LƯU TEMPLATE, xem thành quả bằng cách bấm vào bài viết bất kì thôi ^^!
Lưu ý nếu bạn sử dụng nhiều nhãn (label) cho một bài viết thì breadcrumbs chỉ hiển thị nhãn cuối cùng mà bạn đã thêm vào

+1 để chia sẻ

DMCA.com Protection Status

20

nhận xét

Cái này trong theme của bác Duy Pham mà phòng mình áp dụng cũng có, nhưng mình không biết code nó ở chỗ nào. May quá gặp được bài này, vậy là mình có thể tùy biến theo ý thích rồi.
www.p212pro.tk

Trả lời Xóa

@May Thy Hj, vậy hả, chúc mừng May Thy nhá :))

Trả lời Xóa

Có cái này trông chuyên nghiệp hẳn, mà BTA bỏ cái xác nhận khi comment đi nha, bất tiện quá

Trả lời Xóa

@Độc chiêu Blog Cảm ơn Độc Chiêu nhá, mình cài đặt lại nhận xét rồi :D, add cả nick cậu nữa :)

Trả lời Xóa
Nặc danh
Nặc danh 11/6/11 12:08

Thủ thuật cũng hay, nhưng chắc mình chưa có nhu cầu sử dụng.:) Mà BTA có biết sao mà cái Google Friend Connect lúc hiện lúc ẩn không! Lúc nào cũng gặp lỗi này.

Trả lời Xóa

@Phan Thành Đăng Hj, áp dụng cho đẹp và chuyên nghiệp hơn :D
Cái GG friend + recent comment mặc định của blogger đều bị mất, chắc do máy chủ nó trục trặc, sau khoảng 1-2 ngày là bình thường lại rồi.

Trả lời Xóa

Google Friend Connect thỉnh thoảng bị lỗi có thể Google họ bảo trì hoặc vấn đề nào đó, không cần quan tâm đến đâu vì chả ai có thế sửa được.

Trả lời Xóa

pr0 ơi sao tôi làm xong thì chẳng thấy bài viết nào hiện lên blog luôn.
vào các lable cũng thế luôn.hix hix

Trả lời Xóa

@Lê Nam Cảm ơn bạn nhiều nhá :)), do trong chú giải mã không hỗ trợ tiếng Việt, mình đã fix lại rồi :D

Trả lời Xóa

mình đang nghiên cứu cái này để set cho http://hoteldanang.com hy vọng sẽ ổn

Trả lời Xóa

@Vinh
:) Chúc bạn thành công ! :))
Temp của bạn đẹp đấy :)

Trả lời Xóa
Nặc danh
Nặc danh 6/7/11 15:50

anh ơi sao em áp dụng thì lại lấy luôn ảnh ở phần label ra đặt trước chữ trang chủ nhỉ

Trả lời Xóa

@Fly_in_Dream Mấy hôm nay mình về quê nên chưa reply cho các bạn đc. Bạn có thể chỉ rõ lỗi thế nào không? có thể cho mình xem demo đc không? mình áp dụng cho một số Temp của mình tốt mà.

Trả lời Xóa
Nặc danh
Nặc danh 21/7/11 08:49

anh Trường ơi em là flyindream đây anh coi đi em áp dụng thì nó ko dúng vị trí
anh giúp em nhé

Trả lời Xóa

Lâu rồi không thấy Trường Anh post bài nhỉ, có chuyện gì bận à?

Trả lời Xóa

@your_lies Bạn cho mình xem demo được không. Về quê nghỉ hè nên ít có thời gian trả lời các bạn. hj :D

Trả lời Xóa

Ah ra vậy, nghỉ hè vui vẻ ha!

Trả lời Xóa

Mình đã đặt liên kết với blog bạn rồi,bạn đặt lại nhé.Cảm ơn.Chúc vui vẻ!

Trả lời Xóa

@Nghệ Tĩnh Spam như thế này không tốt lắm đâu bạn ah.

Trả lời Xóa

Cảm ơn bài viết nhé
hôm trc mình cũng có đặt breadcrumb rồi nhưng với bài có nhiều nhãn thì nó hiện tất cả các nhãn lên nhìn rất chối, cái này có 1 nhãn thôi nên nhìn khá gọn :)

Trả lời Xóa

Đăng nhận xét :

Hủy trả lời

Cảm ơn bạn đã đọc bài viết, nếu có góp ý vui lòng gõ tiếng Việt có dấu, dễ đọc và tỏ ra tôn trọng tiếng Việt nhé !
Mọi ý kiến hay khúc mắc riêng các bạn có thể gửi về Trang Liên hệ Hoặc qua email của mình: buitruonganh.tk@gmail.com nhé !
Hân hạnh được làm quen! Bùi Trường Anh

Thư mục

Nhận xét mới

↑ top | RSS | Policy | © Copyright