Thanh điều hướng breadcrumbs cho blogger chuẩn HTML5 và CSS3

By Unknown

Thứ Ba, 29 tháng 7, 2014

Một số thủ thuật viết về thủ thuật thanh điều hướng breadcrumbs cho blogger đả lỗi thời không phù hợp với một số template HTML5. Năm 2014 các blogger đang chuẩn hóa template sang HTML5, CSS3 và Responsive nó thân hiện cho SEO hơn. Và thanh điều hướng breadcrumbs thân thiện cho SEO là một trong số đó.
Sau khi đả fix xong và chuẩn cả HTML5 và CSS3 chia sẻ cho anh em chèn vào template blogspot của mình. Các bạn cùng tiến hành thôi nào.

Thanh điều hướng breadcrumbs cho blogger chuẩn HTML5 và CSS3

Đoạn CSS thanh điều hướng breadcrumbs chuẩn CSS3

/* Breadcrumbs */
.breadcrumbs {
word-wrap: break-word;
margin: 5px;
border: 1px solid #fff;
box-shadow: 1px 1px 5px rgba(1,1,1,.1);
overflow: hidden;
padding: 5px;
background: rgba(255, 255, 255, 0.8);
}

Cách chèn đoạn CSS vào trong template

Đầu tiên các bạn đăng nhập vào blogger.com >> Mẫu >> Chỉnh sửa HTML >> Nhấn Ctrl+F >> Tìm thẻ ]]></b:skin> sau đó thêm đoạn CSS trên vào trước thẻ ]]></b:skin>

Code thanh điều hướng breadcrumbs cho blogger chuẩn HTML5

<b:includable id='breadcrumb' var='posts'>
           <b:if cond='data:blog.homepageUrl != data:blog.url'>
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div> </b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span> </div> <b:else/>
<b:if cond='data:blog.searchQuery'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Hướng dẫn chèn breadcrumbs cho template chưa tích hợp sẳn breadcrumb

Sau khi thêm đoạn CSS3 xong các bạn tìm đến mã sau <b:includable id='main' var='top'> và thay nó thành :

<b:includable id='breadcrumb' var='posts'>
           <b:if cond='data:blog.homepageUrl != data:blog.url'>
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div> </b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span> </div> <b:else/>
<b:if cond='data:blog.searchQuery'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Sau đó lưu lại và xem kết quà .

Hướng dẫn chèn breadcrumbs cho template tích hợp sẳn breadcrumb

Các bạn tìm đến đoạn mã 

<b:includable id='breadcrumb' var='posts'>...</b:includable> sau đó thay nó code chuẩn HTML5 như trên và lưu lại thế là OK.

Hình ảnh thanh điều hướng breadcrumbs sau khi index trên google

Hình ảnh xuất hiện ở bài viết

Hình ảnh đả index trên google

Các lỗi mắc phải của thanh điều hướng củ mắc phải khi check template tại HTML5 tại validator.w3.org

Line 84, Column 68: Attribute xmlns:v not allowed here.<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

và cảnh báo

Line 84, Column 68: Attribute with the local name xmlns:v is not serializable as XML 1.0.<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

Sau khi các bạn làm theo các bước như trên khi check lại đảm báo nó sẻ mất 2 dòng này. Nhanh gọn mà khỏe vậy là các bạn đả có thanh điều hướng breadcrumbs cho blogger chuẩn HTML5 và CSS3 rồi nhé.

Tag : Chia sẻ, CSS, HTML5