Cách Làm Label Widget Dạng Dropmenu Đẹp Cho Blogger Version 2

Xin chào các bạn, cũng đã khá lâu rồi mình không viết bài để Up lên Blog vì mình hơi bận học. Hôm nay rảnh lên mình ngồi viết bài về cái Widget Label Dạng Dropmenu Version 2 cho các bạn, thực chất là chỉ thay đổi màu nền cho nó thôi ( gọi Version 2 cho nó oai ) Thôi không linh tinh luyên thuyên nữa bắt đầu vào công việc luôn nhé...

Hình Ảnh Minh Hoạ

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

Bước 1: Truy cập quản trị Blogger - Bố cục - Thêm tiện ích - Nhãn (Label) và nhớ ID của tiện ích đó.

- Thông thường thì ID của tiện ích đó là  Label1

Bước 2: Truy Cập vào phần Chủ Đề - Chỉnh sửa HTML:

Nhấn Tổ hợp phím Ctrl+F và tìm đoạn code có dạng sau:

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

Bước 3: Thay toàn bộ đoạn code trên bằng code mới bên dưới:

<b:widget id='Label1' locked='false' title='Labels' type='Label'> <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:#7577a9;width:100%;color: #fff;position: relative;width: 100%;margin: 0;padding: 6px 8px 6px 10px; height: 40px; line-height: 20px; font-size: 15px; 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;'> <option>Lựa Chọn Chuyên Mục</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:widget>

Bước 4: Tìm đến thẻ ]]></b:skin> và dán đoạn CSS sau phía trên thẻ đó.

#Label1 .widget-content{background:#62648e}

Bước 5: Điều Chỉnh
- #7577a9, #62648e : Đổi thành mã mãu bạn muốn hiển thị.
Bước 6: Lưu Mẫu lại và xem kết quả.

Kết luận:

Chỉ với vài bước đơn giản các bạn đã có một cái Widget Label dạng Dropmenu thật là màu mè cho Blog của các bạn rồi. Có gì lỗi các bạn nhớ góp ý giúp mình nhé!

Chú các bạn thành công!