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
Tác giả bài viết: Tính Getter
Thời gian đăng bài: Thứ Tư, 14 tháng 2, 2018
Tổng số bình luận: 38

38 nhận xét:

  1. Star Đức Blog qua tương tác với bác đây, bài viết hay lắm đó

    Trả lờiXóa
  2. Năm mới tết đến chúc Tính có nhiều sức khỏe và thành công trong cv nha

    Trả lờiXóa
  3. Năm mới tết đến chúc bác có thật nhiều sức khỏe và thành công trong năm tới :)

    Trả lờiXóa
  4. Tết đến chúc bạn vui vẻ nhé .

    Trả lờiXóa
  5. Năm mới đến chúc e vui vẻ nhé.

    Trả lờiXóa
  6. Năm mới đến chúc bác vui vẻ nhé có nhiều sức khỏe và thành công trong cv nha

    Trả lờiXóa
  7. Goodjob :V Năm mới chúc Blog em phát triển hơn năm cũ thật nhiều nhé !:v

    Trả lờiXóa
  8. Giờ cũng đã 1h30 rồi. Đã qua một năm mới. Chúc cu Tính có 1 năm mới vui vẻ - an khang thịnh vượng nhé <3

    Trả lờiXóa
  9. Đặt tui cái lk nhé Tính
    Link: https://toivietcodeblog.blogspot.com
    Tên hiển thị: Tôi Việt Code
    Vì chưa ổn định đc temp nên tui sẽ đặt cho ông sau nhé

    Trả lờiXóa
  10. Sao để quảng cáo ở index kì cục z a @@

    Trả lờiXóa
    Trả lời
    1. Tại nó không chịu thành hình chữ nhật em ạ :(

      Xóa
  11. Bữa a bận tết h mới có dịp ghé sang em. Chúc em năm mới phát tài với GA nha. :v

    Trả lờiXóa
  12. Chất thế đã đã test và đẹp vl :3

    Trả lờiXóa
  13. ê tính, đưa gmail đây. ib nhờ tí :v

    Trả lờiXóa