Tạo Label Widget dạng Dropmenu cực chất dành cho Blogspot (Style 3)

Yo yo yo yo, chào mừng các bạn đã quay trở lại với blog của Tính Getter!
Tiếp nối với những chuyên mục về Label Widget, hôm nay mình sẽ mang đến cho các bạn một style mới của nó. Theo mình thì mình thấy nó rất đẹp, đẹp vô cùng luôn :v Không dài dòng nữa, chúng ta cùng bắt đầu nhé!

Các bước thực hiện

Bước 1: Các bạn vào Blogger Bố cục Thêm tiện ích Nhãn (Label) và các bạn phải nhớ ID của nó Label1 để chúng ta thực hiện tiếp bước 2. [Thường thì nó được chèn ở phần sidebar.]
Bước 2: Các bạn vào Chủ đề Chỉnh sửa HTML và tìm đoạn code có dạng như sau.

<b:widget id='Label1' locked='false' title='' type='Label' version='1'>...</b:widget>

Bước 3: Thay toàn bộ đoạn code đó bằng đoạn code phía dưới.

<b:widget id='Label1' locked='false' title='Chuyên mục nổi bật' type='Label' version='2' visible='true'> <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'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <select onchange='location=this.options[this.selectedIndex].value;' style='background:#fff;width:100%;color: #069999;position: relative;width: 100%;margin: 0;padding: 6px 8px 6px 10px; height: 40px; line-height: 20px; font-size: 15px; font-family:Roboto Condensed,san-serif; border: 2px solid #069999; font-weight:bold;-webkit-appearance: none; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;'> <option>Chọn danh mục mà bạn muốn xem...</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>) </option> </b:loop> </select> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='cloud'> <b:loop values='data:labels' var='label'> <span class='label-size'> <b:class expr:name='&quot;label-size-&quot; + data:label.cssSize'/> <a class='label-name' expr:href='data:label.url'> <data:label.name/> <b:if cond='data:this.showFreqNumbers'> <span class='label-count'><data:label.count/></span> </b:if> </a> </span> </b:loop> </b:includable> <b:includable id='content'> <div class='widget-content'> <b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/> <b:include cond='data:this.display == &quot;list&quot;' name='list'/> <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/> </div> </b:includable> <b:includable id='list'> <ul> <b:loop values='data:labels' var='label'> <li> <a class='label-name' expr:href='data:label.url'> <data:label.name/> <b:if cond='data:this.showFreqNumbers'> <span class='label-count'><data:label.count/></span> </b:if> </a> </li> </b:loop> </ul> </b:includable> </b:widget>

*Các bạn có thể thay đổi mã màu mà mình thích ở phần mà mình đã tô màu.
Bước 4: Lưu lại và hưởng thụ thành quả.

Tổng kết

Chỉ với 4 bước đơn giản các bạn đã có thể tạo cho mình 1 Widget nhãn tuyệt đẹp rồi. Chúc các bạn thành công!

Chỉ còn 3 ngày nữa thôi thì Tết đã đến rồi! Năm mới đã đến, năm cũ lại qua đi, để lại trong lòng ta những kỉ niệm khó quên. Mình xin chúc các bạn thật nhiều sức khỏe, có một năm mới an khang thịnh vượng, vạn sự như ý và đạt được nhiều thành công hơn trong năm mới này nhé! HAPPY NEW YEAR!!! :D