• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo thanh điều hướng bài viết chuẩn cho blogspot

24
04/07/2011

Thanh điều hướng bài viết (breadcrumbs) có vai trò rất quan trọng, giúp người đọc dễ dàng lướt đến những bài viết khác trong cùng một chuyên mục hoặc xác định được bài viết đang đọc thuộc chuyên mục nào. Hẳn bạn từng biết và sử dụng kiểu thanh điều hướng cổ điển mà dân Blogspot thường sử dụng. Cách cổ điển này có thể nói là hơi phức tạp về các bước thực hiện đối với một blogger mới. Nếu xét về nội dung thì nó có những điểm thừa, tức là trong phần Breadcrumbs vốn dĩ đã có tiêu đề bài viết (post-title), cùng với tiêu đề bài viết sẵn có của phần post dẫn đến việc trùng lặp.

Từ lâu mình đã để ý đến vấn đề này và đã nghĩ ra một cách để khắc phục nhược điểm này để cho ra thủ thuật tạo thanh điều hướng bài viết chuẩn cho blogspot, như Bloggerism đang sử dụng. Bên dưới là hình ảnh minh họa so sánh 2 kiểu Breadcrumbs, một là kiểu truyền thống và một là kiểu mà Bloggerism tạo ra.


Để thực hiện thủ thuật này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến đoạn code như bên dưới:

<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>

Đoạn code này định dạng tiêu đề bài viết ỏ các kiểu trang (trang index, trang item và trang static_page). Việc của bạn cần làm là thay toàn bộ đoạn code nói trên bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
</b:loop>
<b:else/>
</b:if>
&#187; <span><h2 class='post-title entry-title'><data:post.title/></h2></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>

Ý nghĩa của đoạn code này: Chỉ định thanh điều hướng dạng Home >> Tên nhãn >> Tiêu đề bài viết (không URL) ở các trang item, còn ở các kiểu trang khác (trang chủ, trang nhãn, trang tĩnh…) thì chỉ định tiêu đề bài viết mặc định bình thường.

Bước 2. Đặt code CSS bên dưới vào trước dòng ]]></b:skin>.

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

Nếu bạn rành về CSS thì có thể tùy biến CSS theo ý thích của mình.

Hy vọng thủ thuật này sẽ giúp ích rất nhiều cho blogspot của bạn.

{24 bình luậnAdd yours ?}

00:06:00, 5 thg 7, 2011

nên để title của post riêng biệt khỏi breadcrumbs thì hơn

Reply
04:23:00, 5 thg 7, 2011

Có nhiều nhãn thì sẽ hiện nhãn nào hả bác ?

Reply
07:07:00, 5 thg 7, 2011

@Ngankvn ® em thấy nó hiện hết Labels luôn , như vậy ko thích hợp cho những blog 1 bài chứa nhiều labels .

Reply
09:34:00, 5 thg 7, 2011

Đúng rồi. Muốn xài Breadcrumbs thì nên đặt 1 label cho mỗi bài viết, nếu xài nhiều tag cho 1 bài viết thì k nên xài cái này.

Reply
15:23:00, 6 thg 7, 2011

Để thử xem sao, thanks :D

Reply
22:22:00, 8 thg 7, 2011

Hình như anh có viết một bài về breadcrumb rồi mà, cái đó chỉ hiển thị một nhãn thôi, xài rất ok! À, nhà mới của anh đẹp lắm :55) Em mới xài template Newcast của Noct cho blog mới của em, anh cho ý kiến nha! :51)
http://www.sachmienphi.tk/

Reply
17:00:00, 10 thg 7, 2011

Giúp em với anh Hà ơi
Template của em k tìm được đoạn code để thay
http://lamkan.blogspot.com

Reply
17:01:00, 10 thg 7, 2011

Ở Bước 1 đó anh

Reply
21:46:00, 10 thg 7, 2011

@ peace19812006: Hình như e chế biến đâu còn là Newscast nữa. Theo a một khi đã rành chút về CSS rồi thì có thể tự design. Các Template chỉ là cái nền nhà để mình thể hiện ý tưởng. Như http://www.sachmienphi.tk/ bây giờ a thấy nó giống Template của Vnblogspot là đúng hơn bởi vì nó có style giống Tem của TN. Cái phần Post Body nên thêm padding-left cho nó cách biên bên trái xa tí

Reply
21:48:00, 10 thg 7, 2011

@ Lamkan: E tìm ngay trên dòng <div class='post-header-line-1'></div> sẽ thấy đoạn code liên quan ở Bước 1 mà. :71)

Reply
21:17:00, 12 thg 7, 2011

@Huỳnh Nhật Hà Cảm ơn anh đã góp ý, hì hì, trang của em sau khi nén CSS lại công nhận load nhanh thiệt!

Reply
17:13:00, 13 thg 7, 2011

thank nhiều

Reply
13:36:00, 20 thg 7, 2011

:71) :71) :71) :75)thank bạn nhiều

Reply
12:10:00, 31 thg 7, 2011

Cái này thì blog mình k áp duụng đc do có nhiều bài dùng nhiều label

Reply
00:27:00, 3 thg 8, 2011

thanks hà, đã up dụng thành công ^^

Reply
16:57:00, 13 thg 8, 2011

Anh ơi, có thể giúp em về blog em với, em muốn ẩn nó cho nó kg dài lê thê T_T http://mmobesttoearn.blogspot.com/ nó dài quá, muốn ẩn và thêm 1 số cho đẹp mắt như slide.
Cho em xin yahoo anh với ạ :D Nick em là Truongminh19877
Cảm ơn anh trước :53

Reply
20:56:00, 13 thg 8, 2011

Julie, trang của em nên kiếm một Template chuẩn hơn chứ như thế thì k triển vọng được. Btemplates.com là một nơi em có thể tìm Template.

Reply
Yolks
AUTHOR
09:09:00, 21 thg 8, 2011

Anh hà ráng nghiên cứu làm sao cho nó chỉ hiện 1 label dc ko nhỉ ^^

Reply
13:18:00, 3 thg 9, 2011

Để thanh điều hướng hiển thị 1 nhãn xin xem tại đây http://www.dacbietthuvi.net/2011/09/breadcrumbs-blogspot-blogger-thanh-dieu.html

Blog Huỳnh Nhật Hà quá nhiều thủ thuật hay :55)

Reply
16:25:00, 21 thg 11, 2011

anh ơi m muốn thay ">>" thành kí tự khác thy sao nhỉ?

Reply
16:43:00, 13 thg 12, 2011

muốn post nhiều bài viết lên trang mới tạo thì phải làm sao ạh, ví bài viết thuờng sẽ hiện lên trang chủ

Reply
10:21:00, 9 thg 4, 2012

Mình làm được rồi, Thanks nhé Nguyễn Hải blOg

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn