Tạo navigator breadcrumb cho Blogspot

Phần này mình nói về việc tạo ra navigator breadcrumb cho Blogspot, có rất nhiều bài viết trên mạng hướng dẫn tạo navigator cho Blogspot mọi người có thể tham khảo thêm.

Ví dụ như thanh navigator của mình.

Mình đã test thử và chạy rất ok. Test Rich snippet http://www.google.com/webmasters/tools/richsnippets

Tạo navigator breadcrumb cho Blogspot

Bước 1. Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến đoạn code như bên dưới:

<b:includable id='post' var='post'>

Bước 2. Tiếp đó bạn copy đoạn code sau và chèn ngay phía dưới code vừa tìm được.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='Breadcrumbs'>
 <div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'> <a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'><span itemprop='title'>Home</span></a>  &gt;  </div>
         <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;'>
                  <div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a>  &gt;  </div>
               </b:if>
             </b:loop>
              <span><data:post.title/></span>
           </b:if>
         </b:loop>
       </div>    
  </b:if>


Cuối cùng thêm đoạn CSS này vào phần CSS

#Breadcrumbs div{float:left;}
#Breadcrumbs{padding:10px;background:#F1E1FF;border:1px solid #DCB5FF}

Lưu lại mẫu sau đó ta có thể kiểm tra lại việc tạo Navigator breadcrumb thành công hay chưa trên blog của mình và vào kiểm tra lại rich snippets http://www.google.com/webmasters/tools/richsnippets

Như vậy là mình có thể tạo navigator breadcrumb cho Blogspot, ngoài ta có thể Navigator breadcrumb cho website