Chuyên mục

Blogger
  • Blogger Template 5
    • Seo Blogspot 29
      • Thiết kế Blogspot 23
        • Thủ thuật Blogspot 64
          • Tiện ích Blogspot 27
            Máy tính
            • Phần mềm 43
              • Sửa lỗi Windows 18
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    Tổng quan về Việt hóa Label trong Blogspot

                    Các bài viết cũ trước đây trong Blog, mình đã viết hướng dẫn khá đầy đủ về cách tối ưu cho Nhãn hiển thị tiếng Việt có dấu và tạo link không dấu nhưng lại độc lập từng bài do đó nếu bạn nào muốn Việt hóa Label (Nhãn) cho Blog của mình phải mất nhiều thời gian tìm kiếm từng bài.

                    Hôm nay mình tổng hợp thành một bài viết và các bạn chỉ cần làm theo bài này là được. Đầu tiên, bạn cần nắm chắc 2 vấn đề chính:

                    Vấn đề 1: Tên nhãn khi soạn bài viết phải sử dụng tên không dấu và được ngăn cách nhau bằng dấu (-), ví dụ bạn muốn tạo mới một nhãn có tên Thủ thuật Blogspot thì bạn phải đặt tên cho nhãn đó là: thu-thuat-blogspot

                    Vấn đề 2: Nếu bạn sử dụng nhiều Nhãn trong một bài viết, đồng nghĩa với việc bạn đang sử dụng nhãn phân cấp mà theo quy ước tên nhãn được hiển thị theo bảng chữ cái từ trái qua phải. Lấy ví dụ, bạn có một bài viết có 2 nhãn tên Blogspot và Thủ thuật Blogspot thì nhãn Blogspot là nhãn chính và Thủ thuật Blogspot là nhãn con của nhãn Blogspot và trong nhãn Blogspot lại có các nhãn con khác ví dụ: Thiết kế Blogspot, Tiện ích Blogspot.

                    Để đi vào chi tiết cho từng mục, mình sẽ lấy ví dụ trong Blog đang có những nhãn sau:
                    • blog: Blogspot
                    • thu-thuat-blogspot: Thủ thuật Blogspot
                    • may-tinh: Máy tính
                    • thu-thuat-windows: Thủ thuật Windows
                    Sau đây sẽ là chi tiết từng phần:

                    Việt hóa Label trong bài viết


                    Áp dụng cho tiện ích Bài đăng trên Blog (widget Blog1 version='1' & version=2'), tiện ích PopularPosts (PopularPosts widget version='2'), tiện ích FeaturedPost (FeaturedPost widget version='2')

                    Vòng lặp của nhãn có dạng:

                    Copy
                    <b:loop values='data:posts' var='post'>

                      <b:loop values='data:post.labels' var='label'>
                        <data:label.name/> // Tên nhãn
                        <data:label.url/> // URL của nhãn
                      </b:loop>

                    </b:loop>

                    Để Việt hóa nhãn thêm điều kiện b:if bằng nhãn đó sau đó tùy biến hiển thị như sau:

                    Copy
                    <b:loop values='data:post.labels' var='label'>
                      <b:if cond='data:label.name == &quot;blog&quot;'>
                        <a expr:href='data:label.url' title='Blogspot'>Blogspot</a>
                      <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-blogspot&quot;'/>
                        <a expr:href='data:label.url' title='Thủ thuật Blogspot'>Thủ thuật Blogspot</a>
                      <b:elseif cond='data:blog.searchLabel == &quot;may-tinh&quot;'/>
                        <a expr:href='data:label.url' title='Máy tính'>Máy tính</a>
                      <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-windows&quot;'/>
                        <a expr:href='data:label.url' title='Thủ thuật Windows'>Thủ thuật Windows</a>
                      <b:else/> // Nếu các nhãn khác không đặt điều kiện thì hiển thị mặc định
                        <a expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
                      </b:if>
                    </b:loop>

                    Việt hóa Label trong đường dẫn Breadcrumb


                    Liên quan đến nhãn thì có 2 loại trang: Bài viết và trang tìm kiếm Label và yêu cầu trong mẫu template phải có sẵn breadcrumb

                    Trang bài viết

                    Trong widget Blog1, trong thẻ dữ liệu bố cục <b:includable id='breadcrumb' var='posts'></b:includable>, đường dẫn label sẽ được đặt trong thẻ điều kiện <b:if cond='data:blog.pageType == &quot;item&quot;'> hay <b:if cond='data:view.isPost'>

                    Copy
                    <b:if cond='data:view.isPost'>
                      <b:loop values='data:posts' var='post'>
                      <div class='breadcrumbs'>
                        <ul typeof='BreadcrumbList' vocab='http://schema.org/'>
                          <li property='itemListElement' typeof='ListItem'>
                            <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home' property='item' typeof='WebPage'><span property='name'><data:messages.home/></span></a>
                            <meta content='1' property='position'/>
                          </li>
                          <b:loop index='item' values='data:post.labels' var='label'>
                          <b:if cond='data:label.name == &quot;blog&quot;'>
                          <li property='itemListElement' typeof='ListItem'>
                            <a expr:href='data:label.url' property='item' title='Blogspot' typeof='WebPage'><span property='name'>Blogspot</span></a>
                            <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>
                          </li>
                          <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-blogspot&quot;'/>
                          <li property='itemListElement' typeof='ListItem'>
                            <a expr:href='data:label.url' property='item' title='Thủ thuật Blogspot' typeof='WebPage'><span property='name'>Thủ thuật Blogspot</span></a>
                            <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>
                          </li>
                          <b:elseif cond='data:blog.searchLabel == &quot;may-tinh&quot;'/>;
                          <li property='itemListElement' typeof='ListItem'>
                            <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>
                            <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>
                          </li>
                          <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-windows&quot;'/>
                          <li property='itemListElement' typeof='ListItem'>
                            <a expr:href='data:label.url' property='item' title='Thủ thuật Windows' typeof='WebPage'><span property='name'>Thủ thuật Windows</span></a>
                            <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>
                          </li>
                          <b:else/> // Nếu các nhãn khác không đặt điều kiện thì hiển thị mặc định
                          <li property='itemListElement' typeof='ListItem'>
                            <a expr:href='data:label.url' expr:title='data:label.name' property='item' typeof='WebPage'><span property='name'><data:label.name/></span></a>
                            <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>
                          </li>
                          </b:if>
                          </b:loop>
                        </ul>
                      </div>
                      </b:loop>
                    </b:if>

                    Trang Label

                    Trong breadcrumb trang label được hiển thị với thẻ dữ liệu có tên <data:blog.pageName/>, do đó sẽ đặt điều kiện cho trang label bằng với tên nhãn xong tùy biến hiển thị

                    Copy
                    <b:if cond='data:blog.searchLabel == &quot;blog&quot;'>
                      <div class='breadcrumbs'>
                        <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>
                        <span>Blogspot</span>
                      </div>
                    <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-blogspot&quot;'/>
                      <div class='breadcrumbs'>
                        <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>
                        <span>Thủ thuật Blogspot</span>
                      </div>
                    <b:elseif cond='data:blog.searchLabel == &quot;may-tinh&quot;'/>
                      <div class='breadcrumbs'>
                        <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>
                        <span>Máy tính</span>
                      </div>
                    <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-windows&quot;'/>
                      <div class='breadcrumbs'>
                        <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>
                        <span>Thủ thuật Windows</span>
                      </div>
                    <b:else/> // Nếu các nhãn khác không đặt điều kiện thì hiển thị mặc định
                      <div class='breadcrumbs'>
                        <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>
                        <span><data:blog.pageName/></span>
                      </div>
                    </b:if>

                    Việt hóa Label trong widget Label


                    Tên nhãn của widget Label được đặt trong vòng lặp b:loop như sau:

                    Copy
                    <b:loop values='data:labels' var='label'>
                      <a class='label-name' expr:href='data:label.url' expr:title='data:label.name'>
                        <data:label.name/>
                        <b:if cond='data:this.showFreqNumbers'>
                          <span class='label-count'><data:label.count/></span>
                        </b:if>
                      </a>
                    </b:loop>

                    Để Việt hóa nhãn thêm điều kiện b:if bằng nhãn đó sau đó tùy biến hiển thị như sau:

                    Copy
                    <b:loop values='data:labels' var='label'>
                      <b:if cond='data:label.name == &quot;blog&quot;'>
                      <a expr:href='data:label.url' title='Blogspot'>
                        Blogspot
                      <b:if cond='data:this.showFreqNumbers'>
                        <span class='label-count'><data:label.count/></span>
                      </b:if>
                      </a>
                      <b:elseif cond='data:label.name == &quot;thu-thuat-blogspot&quot;'/>
                      <a expr:href='data:label.url' title='Thủ thuật Blogspot'>
                        Thủ thuật Blogspot
                      <b:if cond='data:this.showFreqNumbers'>
                        <span class='label-count'><data:label.count/></span>
                      </b:if>
                      </a>
                      <b:elseif cond='data:label.name == &quot;may-tinh&quot;'/>
                      <a expr:href='data:label.url' title='Máy tính'>
                        Máy tính
                      <b:if cond='data:this.showFreqNumbers'>
                        <span class='label-count'><data:label.count/></span>
                      </b:if>
                      </a>
                      <b:elseif cond='data:label.name == &quot;thu-thuat-windows&quot;'/>
                      <a expr:href='data:label.url' title='Thủ thuật Windows'>
                        Thủ thuật Windows
                      <b:if cond='data:this.showFreqNumbers'>
                        <span class='label-count'><data:label.count/></span>
                      </b:if>
                      </a>
                      <b:else/> // Nếu các nhãn khác không đặt điều kiện thì hiển thị mặc định
                      <a class='label-name' expr:href='data:label.url' expr:title='data:label.name'>
                        <data:label.name/>
                      <b:if cond='data:this.showFreqNumbers'>
                        <span class='label-count'><data:label.count/></span>
                      </b:if>
                      </a>
                      </b:if>
                    </b:loop>

                    Việt hóa Label trong script


                    Khi sử dụng nguồn cấp feeds lấy dữ liệu bài viết bằng cách tạo script, có thể đặt điều kiện if trong script cho tên nhãn, ví dụ mẫu về đoạn script hiển thị tên nhãn

                    Copy
                    <script>//<![CDATA[
                    function getPosts(e) {
                      if (e.feed.entry) {
                        for (var t = 0; t < e.feed.entry.length; t++) {
                          for (var r = 0; r < e.feed.entry[t].category.length; r++) {
                            var l = e.feed.entry[t].category[r].term,
                            n = "/search/label/" + l;
                            if (l == "blog") {
                              l = l.replace("blog", "Blogspot");
                            }
                            if (l == "thu-thuat-blogspot") {
                              l = l.replace("thu-thuat-blogspot", "Thủ thuật Blogspot");
                            }
                            if (l == "may-tinh") {
                              l = l.replace("may-tinh", "Máy tính");
                            }
                            if (l == "thu-thuat-windows") {
                              l = l.replace("thu-thuat-windows", "Thủ thuật Windows");
                            }
                          }
                        }
                      }
                    }
                    //]]></script>
                    <script src='/feeds/posts/summary?alt=json-in-script&amp;max-results=10&amp;callback=getPosts'></script>

                    Việt hóa Label trên thẻ meta


                    Trong phần cuối này mình đã viết bài Các bước thêm thẻ meta đầy đủ, chính xác và không bị trùng lặp trong đó có đề cập đến thẻ meta của nhãn, các bạn tham khảo và làm theo hướng dẫn của bài viết là được.
                    Nội dung chính