[Blogger] Make Label Widget Become Your Main Menu

Tiện ích nhãn (label widget) hầu hết đều xuất hiện ở các template blogger. Với 2 dạng hiển thị (dạng danh sách và dạng đám mây) đôi khi hơi đại trà và gây sự nhàm chán, đã bao giờ bạn nghĩ sẽ phá cách và biến nó thành menu chính của mình chưa, hãy thử nó qua bài viết này

Xem demo

Bài viết sử dụng font awesome 5, tự tích hợp jQuery nếu blog bạn chưa có

Để làm được bạn theo chỉ dẫn sau

Bước 1: Tạo tiện ích nhãn ở bất kì section nào cho phép thêm widget

Bước 2: Lấy ID của tiện ích nhãn đó bằng cách click vào nút chỉnh sửa và kéo tới cuối url của widget

#Mở rộng: Nếu bạn dùng widget layout v3, có thể sẽ bị lỗi

Để hoạt động đúng thay code widget thành

<b:widget id='Label3' locked='false' title='Nhãn' type='Label'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>LIST</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'/>
      <b:widget-setting name='showType'>ALL</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
        <b:loop values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </li>
        </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
  </b:widget>

Thay id='Label3' nếu bị trùng, trong ví dụ này id widget label của tôi là #Label3

Bước 3: Đặt vị trí button trên thanh menu của bạn

<a id='show-label' title='Show list label'><i class='fas fa-bars'/></a>
<div id='wrap-label'/>

Chốc nữa tôi sẽ giải thích vì sao lại có 1 div trống với id là "wrap-label"

Bước 4: Viết CSS theo #Label3 và button

#show-label{color:#fff;font-size:22px;position:relative;top:1px;cursor:pointer;margin:0 0 0 10px}
#wrap-label{position:relative}
#Label3 h2{display:none}
#Label3 .list-label-widget-content li{box-shadow:0 10px 10px -14px rgba(168,165,168,.7);border:0;padding:8px 0}
#Label3 .list-label-widget-content li span:last-child{color:#111;position:absolute;top:9px;right:10px}
#Label3 .list-label-widget-content li a:before{display:none}
#Label3 .list-label-widget-content{position:absolute;width:275px;right:0;background:#fff;box-shadow:-12px 10px 29px rgba(168,165,168,.3);z-index:100;line-height:20px;display:none;overflow:auto;max-height:440px;padding:0;/* Maybe need top:xxx */}
#Label3 .list-label-widget-content::-webkit-scrollbar{width:8px}
#Label3 .list-label-widget-content::-webkit-scrollbar-thumb{height:50px;background:hsla(0,0%,53.3%,.4)}

Chắc chắn css sẽ không được hoàn mỹ vì sẽ bị ảnh hưởng tới 96.69% từ .list-label-widget-content, cũng như css từ menu, sau khi áp dụng thành công thủ thuật bạn có thể căn chỉnh lại cho hợp với giao diện blog

Bước 5: Chèn JS trước thẻ đóng </body> theo #Label3

<script type='text/javascript'>//<![CDATA[
$("#show-label").click(function(){$("#wrap-label").append($("#Label3")),$("#Label3 .list-label-widget-content").toggle()});
//]]></script>

Mục đích tạo div có id wrap-label này để khi có sự kiện click button, toàn bộ nội dung của #Label3 sẽ được append vào nó, khi đó cho dù bạn có tạo widget label ở section nào đi nữa cũng không thành vấn đề. So với việc tạo widget label trong thanh menu thì cách này đơn giản và dễ làm hơn

Lưu mẫu lại và tận hưởng thành quả nhé

KẾT LUẬN: Nói chung không có gì phức tạp, chỉ là sự kết hợp giữa widget của blog cùng với 1 chút jquery huyền ảo để ẩn hiện nó nhưng trông có vẻ chuyên nghiệp hơn rất nhiều. Thậm chí có thể thay thế luôn menu chính của bạn :)

Để lại bình luận nếu gặp khó khăn và chúc thành công !