×

Tạo thanh điều hướng-Breadcrumbs với nhiều nhãn cho blogspot mới nhất

Đây là thanh điều hướng(breadcrumb) cho blogspot không bị lỗi sơ đồ có cấu trúc và không bị cảnh báo trong Google Search Console

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.

Tạo thanh điều hướng-Breadcrumbs many label cho blogspot
Ảnh minh họa:
Tạo thanh điều hướng-Breadcrumbs many label cho 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 == &quot;item&quot;'>
                            <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>
                               &#187;
                            <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 + &quot;?&amp;max-results=15&quot;' 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 != &quot;true&quot;'>
                                   &#187;
                                 </b:if>
                               </b:loop>
                               &#187; <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:
&#187; <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


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 == &quot;item&quot;'>
                            <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>
                               &#187;
                            <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 == &quot;Thu-thuat-blogspot&quot;'>
                    <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 == &quot;Thu-thuat-blogspot-khac&quot;'/>
                    <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 == &quot;Ung-dung&quot;'/>
                    <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 != &quot;true&quot;'>
                                   &#187;
                                 </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 == &quot;Tên nhãn không có dấu và có gạch ngang&quot;'/>
                    <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!

Ads in post custom

Ads in post custom1

Ads in post custom2

Ads in post custom3