Breadcrumb là tiện ích được sử dụng khá phổ biến, đặc biệt là các trang Web/Blog. Breadcrumbs góp phần điều hướng tốt hơn cho Blog của bạn, và đặc biệt rất tốt cho seo. Bài này sẽ hướng dẫn các bạn cách tạo thanh điều hướng tự động cho bài viết của blogspot.
Tạo thanh điều hướng(breadcrumb)
Lợi ích của thanh điều hướng(breadcrumb) là gì?
- Góp phần điều hướng giúp độc giả biết được mình đang xem bài viết ở chuyên mục và đường dẫn như thế nào.- Hỗ trợ SEO và thân thiện với các Robot tìm kiếm.
- Giúp Web/Blog của bạn nhìn chuyên nghiệp hơn.
- Không ảnh hưởng tới tốc độ load của web/blog.
- Khả năng tùy biến cao.
Cài đặt Breadcrumbs many label cho blobgger/blogspot
1- Đăng nhập Blogger
2- Vào Mẫu (Template)
3- Chọn tab Chỉnh Sửa HTML (Edit HTML) => TIếp tục (proceed) => Chọn Mở Rộng tiện ích mẫu (Expand Widget Templates).
4- Thêm đoạn code sau trước thẻ ]]></b:skin>
.breadcrumbs ul li{display:inline-block;position:relative}
.breadcrumbs{width:100%;padding:5px 0 0;font-size:13px}
.breadcrumbs a{font-weight:500;color:#333;letter-spacing:0.8px}
.breadcrumbs a:hover{color:#08f}
5- Thêm vào ngay sau thẻ <b:includable id='main' var='top'>
Đoạn code:
<b:include data='posts' name='breadcrumb'/>6- Thêm vào ngay sau cặp thẻ:
<b:includable id='backlinks' var='post'>.....</b:includable>Đoạn code sau:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> <span itemprop='name'>
<data:messages.home/>
</span>
</a>
<meta content='1' itemprop='position'/>
</span>
»
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + "?&max-results=15"' expr:title='data:label.name' itemprop='item' rel='tag'>
<span itemprop='name'>
<data:label.name/>
</span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != "true"'>
»
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
- Nếu không thích hiện tiêu đề bài viết sau khi kết thúc các nhãn thì thay phần:» <span><data:post.title/></span>
thành chữ khác hoặc xóa bỏ nó đi.
- Bạn có thể thay đổi vị trí của thẻ
<b:include data='posts' name='breadcrumb'/>Tới dưới tiêu đề bài viết theo ý thích của mình.
7- Lưu mẫu.
Việt hóa thanh điều hướng(breadcrumb) với nhãn không dấu và gạch ngang
Lưu ý:Thanh điều hướng(breadcrumb) cấu thành từ 3 phần quan trọng đó là:
- CSS để tạo bố cục
- Phần HTML
- Thẻ gọi để breadcrumb xuất hiện trên giao diện người xem blog.
Với blogspot sử dụng cách viết tên nhãn với chữ không dấu và cách nhau mỗi chữ bằng dấu gạch ngang ví dụ:
Tên nhãn là:Thủ thuật blogspot
Được viết dưới dạng: Thu-thuat-blogspot
Ta có thể việt hóa tên các nhãn trên thanh điều hướng thành chữ có dấu và không còn dấu gạch ngang cho chuyên nghiệp bằng cách sau.
Code thanh điều hướng ở phần trên sẽ được viết dưới dạng sau.
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> <span itemprop='name'>
<data:messages.home/>
</span>
</a>
<meta content='1' itemprop='position'/>
</span>
»
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<b:if cond='data:label.name == "Thu-thuat-blogspot"'>
<a expr:href='data:label.url' itemprop='item' rel='tag' title='Thủ thuật blogspot'>
<span itemprop='name'>
Thủ thuật blogspot
</span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
<b:elseif cond='data:label.name == "Thu-thuat-blogspot-khac"'/>
<a expr:href='data:label.url' itemprop='item' rel='tag' title='Thủ thuật blogspot khác'>
<span itemprop='name'>
Thủ thuật blogspot khác
</span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
<b:elseif cond='data:label.name == "Ung-dung"'/>
<a expr:href='data:label.url' itemprop='item' rel='tag' title='Ứng dụng'>
<span itemprop='name'>
Ứng dụng
</span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
<b:else/><!--Các nhãn ko liệt kê sẽ lấy theo mặc định-->
<a expr:href='data:label.url' expr:title='data:label.name' itemprop='item' rel='tag'>
<span itemprop='name'>
<data:label.name/>
</span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</b:if>
</span>
<b:if cond='data:label.isLast != "true"'>
»
</b:if>
</b:loop>
</div>
</b:if>
</b:loop>
</b:if>
Trong đó Thu-thuat-blogspot là nhãn bất kỳ trong tổng số nhãn của blogspot và sau khi lấy ra trên thanh điều hướng nó có dạng:Thủ thuật blogspot.Bạn cứ việc thêm nhãn theo code bên dưới vào trước thẻ <b:else/>
<b:elseif cond='data:label.name == "Tên nhãn không có dấu và có gạch ngang"'/>
<a expr:href='data:label.url' itemprop='item' rel='tag' title='Tên nhãn có dấu ko cần gạch ngang'>
<span itemprop='name'>
Tên nhãn có dấu ko cần gạch ngang(Tùy ý ko bắt buộc)
</span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
Chúc thành công!