Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 82
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Cách thêm class active vào chuyên mục trên menu khi truy cập các bài viết thuộc chuyên mục đó

                    Nếu các bạn hay đọc báo mạng xem trên giao diện máy tính hay thường gọi giao diện web chắc bạn cũng để ý khi truy cập vào các bài viết thuộc mục nào trên thanh menu thì mục đó được làm nổi bật có thể sử màu khác (background) hoặc thêm đường tô đậm gạch chân (border). Cái này mình thấy rất hay lại chuyên nghiệp nữa 👍

                    + Tác dụng:

                    Thêm class active vào chuyên mục trên menu khi truy cập các bài viết thuộc chuyên mục đó có tác dụng làm nổi bật chuyên mục đó giúp người đọc biết được đang đọc bài thuộc chuyên mục nào và họ có thể tìm kiếm bài thuộc chuyên mục đó.


                    + Xem demo tại trang: https://www.nhipsong24h.net

                    Vậy tại sao bạn không thử áp dụng vào Blogger cho nó chuyên nghiệp nhỉ? 💓 Bắt tay vào làm thôi các chàng trai 💪

                    Đầu tiên bạn cần phải đăng ký class riêng cho mỗi mục trên menu, mình lấy ví dụ menu có dạng sau:

                    Copy
                    <ul class="menu">
                      <li class="chau-a"><a href="/search/label/khu-vuc-chau-a" title="Châu Á">Châu Á</a></li>
                      <li class="chau-au"><a href="/search/label/khu-vuc-chau-au" title="Châu Âu">Châu Âu</a></li>
                      ...
                    </ul>

                    Khi viết css cho class active ví dụ:

                    Copy
                    .menu .active {
                        background: #00416c;
                    }

                    Thứ nhất chúng ta thêm class active vào chuyên mục tại trang tìm kiếm Label như sau:

                    Cách thêm class active vào chuyên mục trên menu khi truy cập các bài viết thuộc chuyên mục đó

                    Ở đây có 2 cách làm như sau:

                    + Cách 1: Sử dụng điều kiện cho trang tìm kiếm Label kết hợp

                    Copy
                    <ul class='menu'>
                      <b:if cond='data:blog.searchLabel == &quot;khu-vuc-chau-a&quot;'>
                        <li class='chau-a active'><a href='/search/label/khu-vuc-chau-au' title='Châu Âu'>Châu Âu</a></li>
                      <b:else/>
                        <li class='chau-a'><a href='/search/label/khu-vuc-chau-au' title='Châu Âu'>Châu Âu</a></li>
                      </b:if>
                      <b:if cond='data:blog.searchLabel == &quot;khu-vuc-chau-au&quot;'>
                        <li class='chau-au active'><a href='/search/label/khu-vuc-chau-au' title='Châu Âu'>Châu Âu</a></li>
                      <b:else/>
                        <li class='chau-au'><a href='/search/label/khu-vuc-chau-au' title='Châu Âu'>Châu Âu</a></li>
                      </b:if>
                    </ul>

                    Ngoài ra nếu bạn thấy dài bạn có thể dùng script add class ví dụ

                    Copy
                    <ul class="menu">
                      <li class="chau-a"><a href="/search/label/khu-vuc-chau-a" title="Châu Á">Châu Á</a></li>
                      <li class="chau-au"><a href="/search/label/khu-vuc-chau-au" title="Châu Âu">Châu Âu</a></li>
                      ...
                    </ul>

                    Đặt script trên </head> hay trên </body> đều được

                    Copy
                    <b:if cond='data:blog.searchLabel == &quot;khu-vuc-chau-a&quot;'>
                      <script>$(".chau-a").addClass("active");</script>
                    </b:if>
                    <b:if cond='data:blog.searchLabel == &quot;khu-vuc-chau-au&quot;'>
                      <script>$(".chau-au").addClass("active");</script>
                    </b:if>

                    Thứ hai thêm class active vào chuyên mục khi truy cập bài viết thuộc chuyên mục đó

                    Cách thêm class active vào chuyên mục trên menu khi truy cập các bài viết thuộc chuyên mục đó

                    Cách này bạn sử dụng điều kiện cho từng Nhãn mà bạn thêm trên menu kết hợp với script add class và bắt buộc phải đặt script trong widget Blog 1, bạn có thể đặt trong <b:includable id='main' var='top'>, <b:includable id='breadcrumb' var='posts'> hay <b:includable id='post' var='post'>

                    Copy
                    <b:loop values='data:post.labels' var='label'>
                    <b:if cond='data:label.name == &quot;khu-vuc-chau-a&quot;'>
                    <script>$(".chau-a").addClass("active");</script>
                    </b:if>
                    <b:if cond='data:label.name == &quot;khu-vuc-chau-au&quot;'>
                    <script>$(".chau-au").addClass("active");</script>
                    </b:if>
                    ....
                    </b:loop>

                    Tóm lại việc thêm class active vào chuyên mục trên menu khi truy cập các bài viết thuộc chuyên mục đó không khó chỉ cần sử dụng 2 điều kiện

                    + Tìm kiếm Label

                    Copy
                    <b:if cond='data:blog.searchLabel == &quot;tên-nhãn&quot;'>
                    ...
                    </b:if>

                    + Điều kiện cho trang bài viết thuộc Nhãn

                    Copy
                    <b:loop values='data:post.labels' var='label'>
                    <b:if cond='data:label.name == &quot;tên nhãn&quot;'>
                      //Sử dụng script add class
                    </b:if>
                    ....
                    </b:loop>

                    Chấm hết bài!!! Đọc bài này nếu không hiểu, bạn cứ đăng nhận xét bên dưới để được hổ trợ.
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn