Thêm thanh điều hướng (Breadcrumb) vào Blogger

(Thanh điều hướng Breadcrumb trong Blogger)

- Thanh điều hướng là một tiện ích rất thông dụng và hữu ích, nó giúp người xem có thể theo dõi vị trí và biết mình đang ở đâu trên Website. Thanh điều hướng giống như việc để lại dấu vết trên một quãng đường mà bạn đã đi qua, nhờ đó bạn rất dễ dàng quay lại một vị trí nào đó trên quãng đường này. Thanh điều hướng thường được sử dụng để hiển thị đường dẫn chuyên mục bài viết trên các Website tin tức hay loại, lĩnh vực sản phẩm trên các trang mua bán hoặc TMĐT.

Chính những lợi thế lớn mà thanh điều hướng mang lại, hôm nay Kênh phần mềm việt sẽ giới thiệu với các bạn cách để thêm thanh điều hướng vào một Blog.

- B1: Đăng nhập vào Blogger
- B2: Chọn Menu Mẫu (Template)\Chỉnh sửa HTML (Edit HTML)
- B3: Tìm (Ctrl+F) đến đoạn Code sau

<b:include data='top' name='status-message'/>
<data:defaultAdStart/>

Và đoạn mã này được gọi là Đoạn mã 1

- B4: Vô hiệu hóa đoạn mã 1, như vậy đoạn mã 1 của bạn sẽ là:

<!-- Start status message
<b:include data='top' name='status-message'/>
End status message-->
<data:defaultAdStart/>

- B5: Thêm đoạn Code phía dưới:

<b:include data='posts' name='breadcrumb'/>

Vào dưới  đoạn code đã được vô hiệu hóa và ta sẽ có đoạn Code mới như sau:

<!-- Start status message
<b:include data='top' name='status-message'/>
End status message-->
<b:include data='posts' name='breadcrumb'/>
<data:defaultAdStart/>

- B6: Tìm (Ctrl+F) đến đoạn Code sau

<b:includable id='main' var='top'>

Thêm đoạn code màu đỏ phía dưới vào phía trên dòng <b:includable id='main' var='top'> ta sẽ có Đoạn mã phía dưới.

              <b:includable id='breadcrumb' var='posts'>
                  <b:if cond='data:blog.homepageUrl == data:blog.url'>
                    <!-- Neu dang o trang chu -->
                    <b:else/>
                    <b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <!-- breadcrumb for the post page -->
                      <a href='http://www.kenhphanmemviet.blogspot.com'/>
                      <p class='breadcrumbs'>
                        <span class='post-navigation'>
                          <a expr:href='data:blog.homepageUrl' rel='tag'>Kênh phần mềm việt </a>
                          <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;'>
                                  <a expr:href='data:label.url' rel='tag'>
                                    <data:label.name/>
                                  </a>
                                </b:if>
                              </b:loop>
                              <b:else/>
                              Chưa xác định
                            </b:if>
                            <span>
                              <data:post.title/>
                            </span>
                          </b:loop>
                        </span>
                      </p>
                      <b:else/>
                      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                        <!-- breadcrumb for the label archive page and search pages.. -->
                        <p class='breadcrumbs'>
                          <span class='post-labels post-navigation'>
                            <a expr:href='data:blog.homepageUrl'>
                              Kênh phần mềm việt
                            </a>
                            <span>
                              <!-- Neu dang phan luu tru -->
                               Bài viết của:
                               <data:blog.pageName/>
                            </span>
                          </span>
                        </p>
                        <b:else/>
                        <b:if cond='data:blog.pageType == &quot;index&quot;'>
                          <p class='breadcrumbs'>
                            <span class='post-labels post-navigation'>
                              <b:if cond='data:blog.pageName == &quot;&quot;'>
                                <a expr:href='data:blog.homepageUrl'>
                                  Kênh phần mềm việt
                                </a>
                                <span>
                                  Tất cả bài viết
                                </span>
                                <b:else/>
                                <a expr:href='data:blog.homepageUrl'>
                                  Kênh phần mềm việt
                                </a>
                                <span>
               <!-- Neu dang chuyen muc -->
                                  Bài viết chuyên mục:
                                  <data:blog.pageName/>
                                </span>
                              </b:if>
                            </span>
                          </p>
                        </b:if>
                      </b:if>
                    </b:if>
                  </b:if>
                </b:includable>
   <b:includable id='main' var='top'>

- B7: Tìm (Ctrl+F) đến đoạn Code sau ]]></b:skin> và thêm trước nó đoạn mã code phía dưới:

/*****************************************
     BREADCRUMB
******************************************/
.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
   line-height: 1.4em;
 }
.post-navigation > a {
    border: 1px solid #016DB5;
    border-radius: 8px 8px 8px 8px;
    color: #003399;
    padding: 4px 15px;
    position: relative;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.post-navigation > a:hover {
    border: 1px solid #016DB5;
    border-radius: 8px 8px 8px 8px;
    color: #FF9900;
    padding: 4px 15px;
    position: relative;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.post-navigation > span {
    padding-left: 10px;
   font-weight:bold;
}

- B8: Kích nút Lưu mẫu

Bây giờ bạn đã thêm thành công thanh điều hướng vào Blog rồi đó.

Kênh phần mềm việt