Tạo Dropdown Cho Nhãn (Label) Blogspot

Menu Drop Down - Dạng Menu thả xuống giúp gộp các nhãn (label) lại với nhau. Nhờ đó giao diện Website, Blog gọn và trông thoáng, bớt rối hơn. Thích hợp sử dụng nếu Blog của bạn có nhiều thông tin, nhiều chuyên mục.
1. Đăng nhập vào Blogger.com
2. Chọn Template > Edit HTML
3. Tìm code ]]></b:skin> hoặc </style>, dùng tổ hợp phím CTRL + F để tìm.
4. Thêm đoạn CSS sau lên trên thẻ ]]></b:skin>hoặc </style>:

/* Dropdown Label */
.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}

5. Vào Layout > thêm widget Label cho Blogspot, nếu có sẵn rồi thì thôi Sau đó vào Template > Edit, thay thế toàn bộ nội dung Widget Label bằng: 

   <b:widget id='Label1' locked='false' title='Labels' type='Label' version='1' visible='true'>
      <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> Select Label </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=7&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=7&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>

Xong, kiểm tra lại kết quả