[Blogger] Tạo dropdown label (nhãn) cho blogspot

Nhãn (Label, Tags, Categories...) là một thành phần rất quan trọng khi bạn sử dụng nền tảng blogger. Nhãn giúp bạn phân loại bài viết, tạo menu tìm kiếm một cách nhanh chóng. Mặc định blogger cung cấp cho ta 1 widget dùng để hiển thị nhãn dưới dạng "cloud" và "list".

Khi số lượng nhãn ít thì phần hiển thị ra có vẻ đẹp, tuy nhiên khi nhiều thì nhìn rất rối, ảnh hưởng đến bố cục cũng như tính thẩm mỹ. Và bài viết này sẽ giới thiệu tới bạn đọc một thủ thuật tạo dropdown menu cho tất cả các nhãn có trong blog bằng cách chỉnh sửa 1 chút widget của blogger.

Sau khi áp dụng thì widget sẽ có dạng Categories Nhãn 1 Nhãn 2 Nhãn 3 Nhãn 4  vừa chuyên nghiệp vừa đỡ tốn diện tích

Ok giờ bắt đầu thủ thuật

Nếu bạn chưa thêm widget Nhãn vào bố cục thì hãy thêm vào trước nhé

Tiếp theo vào phần chỉnh sửa HTML và tìm kiếm nhanh đến đoạn code của nó

ID label mỗi blog có thể khác nhau, bạn cứ tìm đến label bạn muốn tạo dropdown là được. Sau đó đôi đen đoạn code đó (bắt đầu bằng <b:widget và kết thúc bằng </b:widget>). 

Thay thế nó bằng đoạn sau

<b:widget id='Label1' locked='false' title='Categories' type='Label' version='1'>
    <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'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><span><data:title/></span></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;'>
        <div class='droplabeldo'>
          <select class='dropdown-select' onchange='location=this.options[this.selectedIndex].value;'>
            <option>Categories</option>
            <b:loop values='data:labels' var='label'>
              <option class='labdrop' expr:title='data:label.name' expr:value='data:label.url + &quot;?&amp;amp;max-results=5&quot;'>
                <data:label.name/> <span class='labcount'>(<data:label.count/>)</span> </option>
            </b:loop>
          </select>
        </div> <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 + &quot;?&amp;amp;max-results=5&quot;' expr:title='data:label.name'>
            <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>
    </div>
  </b:includable>
  </b:widget>

Trong đó bạn có thể thay đổi title='Categories' (tiêu đề widget) và <option>Categories</option> (Nội dung hiển thị đầu tiên của dropdown) thành tên bạn muốn hiển thị.

Viết css dán code sau vào trước thẻ ]]></b:skin>

.droplabeldo select{font-size:14px;outline:none;cursor:pointer;transition:all .6s ease-out}
.droplabeldo{display:inline-block;position:relative;overflow:hidden;width:100%;border:0;height:40px;line-height:40px;color:#7f8c8d}
.droplabeldo:before,.droplabeldo:after{content:'';position:absolute;z-index:2;top:15px;right:12px;width:0;height:0;line-height:40px;border:4px dashed;border-color:#999 transparent;pointer-events:none}
.droplabeldo:before{border-bottom-style:solid;border-top:none}
.droplabeldo:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{color:#000;position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:40px;line-height:20px;font-size:13px;border:1px solid rgba(0,0,0,0.1);-webkit-appearance:none;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.droplabeldo select:hover{border-color:rgba(0,0,0,.34)}
.droplabeldo select:focus{outline:none;cursor:pointer;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
.dropdown-select>option{background:#fafafa;position:relative;display:block;margin:3px;text-shadow:none;outline:0;border:0;cursor:pointer}

Sau đó lưu mẫu lại và kiểm tra kết quả.

Tùy chỉnh:
+ Chỉnh CSS theo ý thích của bạn
+ Chỉnh giá trị max-results=5 trùng với "perPage" để phân trang đúng khi tìm kiếm

Good Luck !