[Blogspot] Label Widget dạng Dropmenu cho blogger

Thông thường trong một blog sẽ có rất nhiều nhãn (label) và đôi khi ta lại chưa thể lọc được hết nhưng lại muốn hiển thị toàn bộ nhãn đó cho người đọc tiện theo dõi.
Tuy nhiên, việc hiển thị toàn bộ nhãn như vậy mà không chọn lọc đôi khi sẽ gây rối mắt và sẽ là một dang sách nhãn dài lê thê nếu như ta chưa can thiệp từ Css hay Jquery để trang trí nó. Vậy thì hôm nay mình sẽ hướng dẫn các bạn một cách vô cùng đơn giản là tạo widget label dạng dropmenu (xổ xuống giống các thanh menu ở header ý).

Label widget dạng dropmenu trong blogger/blogspot

Cách 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 đó.

- Để xem ID của widget (tiện ích) đó, bạn chỉ cần kéo chuột đến đoạn cuối của đường dẫn widget (link widget) như hình dưới sẽ thấy.

Xác định ID của Widget

Như vậy, thì ID của widget nhãn của chúng ta sẽ là Label1.

- Tương tự bạn có thể xác định được ID của các widget khác như Hồ sơ tác giả, HTML/Javascript...

Bước 2: Ta sang Chủ đề - Chỉnh sửa HTML - Tại đây có 2 cách làm:

Cách 1: Ấ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>

Cách 2: Tại tab Chuyển đến tiện ích (Bên phải gần tab Lưu chủ đề) - Bạn click vào đó chọn đến Label1 (trùng khớp với ID của widget ta xác định ở bước 1) cũng sẽ thấy đoạn code 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 style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> 
<option>Click to choose a label</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>

Tùy chỉnh:

• width:100%: Điều chỉnh độ rộng (hãy tùy biến giá trị 100% thành 90%,80%...hoặc 160px,150px...sao cho phù hợp blog bạn)
• Click to choose a label: Thay đổi chữ hiển thị

Bước 4: Lưu template lại và xem kết quả.

Kết luận:

Widget Label dạng Dropmenu tuy không được đẹp bằng các dạng tùy chỉnh label khác nhưng blog bạn sẽ trông khoa học hơn và đặc biệt không cần dùng thêm Css hay Jquery nào để tùy biến label.

Chúc các bạn thành công và hãy luôn ủng hộ TSM nhé!

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!