Hướng dẫn tạo Breadcrumbs cho blogspot - Thiết kế blogspot



Breadcrumb là gì ? Làm thế nào để tạo breadcrumbs cho blogspot của bạn





Breadcrumb: được hiểu một cách đơn giản là tập hợp các đường dẫn phân cấp đến bài viết trên blog hoặc website của bạn, Breadcrumbs giống như đường dẫn thư mục. Breadcrumbs giúp người dùng có thể biết được mình đang ở  đâu trong website của bạn, khách viến thăm website có thể di chuyển từ trang này sang trang khác một các dễ dàng, đối với một website cấu trúc phức tạp mà lại không có Breadcrumb thì giống như một mê cung không có lối ra,

Lợi ích của Breadcrumbs

Đối với người sử dụng: giúp người dùng biết được mình đang ở vị trí của mình trên website. Thuận tiện cho việc di chuyển giữa các trang, không phải quay trở về trang chủ. Đối với website đây là một tiện ích quan trọng để Google search đánh giá chính xác PR, PA và keyword relation của website rất tốt cho việc quảng bá website, có nhiều cơ hội đạt vị trí cao với những từ khóa mong muốn,..

Hướng dẫn tạo Breadcrumbs cho Blogspot 

Để tạo Breadcrumbs cho Blogspot hãy thực hiện qua các bước sau:

Bước 1:  
            Đầu tiên bạn nên sao lưu lại toàn bộ code của blog để khôi phục lại tình trạng ban đầu khi xảy ra sai sót trong thao tác.
         Để sao lưu lại template bạn làm như sau: Bạn vào mục Template (Mẫu)=> nhấn vào mục Sao lưu/Khôi phục => Lưu lại mẫu bằng tên bất kỳ với phần mỡ rộng xml (*.xml) trên máy tính của bạn.
          Tiếp theo bạn vào mục Edit HTML ( để chỉnh sửa mã nguồn) ==> tìm dòng ]]></b:skin> ( trong phần khai báo CSS của blog, bạn sử dụng tổ hợp phím Ctrl + F để tìm kiếm cho nhanh)

Thêm đoạn mã dưới đây trước thẻ  ]]></b:skin> (chú ý là phía trước)
.breadcrumbs{
background:#fff;color:#289728;padding:12px;border:2px solid #333;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;box-shadow:2px 2px 2px #CCC;

Bước 2: 
 Đầu tiên bạn tìm đoạn mã sau :


<b:include data='top' name='status-message'/>
              Thay thế bằng đoạn mã bên dưới
<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/>
Tiếp kế tiếp bạn tìm đoạn mã sau:
  <b:includable id='main' var='top'>
          Thay bằng đoạn mã bên dưới
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/><b:if cond='data:blog.pageType == "item"'><p class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"><span class='post-labels'><span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span><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 == "true"'> »<span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span></b:if></b:loop><b:else/> » Unlabelled</b:if> » <span><data:post.title/></span></b:loop></span></p><b:else/><b:if cond='data:blog.pageType == "archive"'><p class='breadcrumbs'><span class='post-labels'><a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/></span></p><b:else/><b:if cond='data:blog.pageType == "index"'><p class='breadcrumbs'><span class='post-labels'><b:if cond='data:blog.pageName == ""'><a expr:href='data:blog.homepageUrl'>Home</a> » All posts<b:else/><a expr:href='data:blog.homepageUrl'>Home</a> » Categories under <data:blog.pageName/></b:if></span></p></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'><!--Breadcrumbs Navigation For blogger --> 
       Đến đây bạn bạn đã hoàn việc thành tạo Breadcrumbs cho Blogspot nhấn núlưu mẫu để lưu lại thay đổi. Nhấn vào nút xem blog (view blog) để xem thành quả của mình.

 Để Breadcrumbs Blogspot của bạn hiển thị trên kết quả tìm kiếm các bạn làm như sau:
     Đăng nhập Blog => vào mục Cài đặt => đến mục Tùy chọn tìm kiếm=> Robots.txt  vào phần tùy chỉnh sao đó chép vào đoạn mã sauo :
User-agent: Mediapartners-Google
Disallow: 
User-agent: *
Allow: /search
Allow: /
Sitemap: http://blgkienthuc.blogspot.com/sitemap.xml
Phần sitemap đổi đường dẫn http://blgkienthuc.blogspot.com thành thành đường dẫn blog của bạn./.

0 nhận xét:

Đăng nhận xét

 
Thiết kế blogspot © 2013. All Rights Reserved. Powered by Blogger
Top