Tạo Dropdown Cho Nhãn (Labels) Gọn, Nhẹ Cho Blogspot

Xin chào các bạn, Menu Drop Down - Dạng Menu thả xuống giúp gộp các nhãn (labels) 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. Không linh tinh nữa, chúng ta cùng vào vấn đề chính :))

Bước 1: Đăng nhập Blogger Chủ đề Chỉnh sửa HTML.

Bước 2: Chèn code này vào trước thẻ ]]></b:skin>

/* 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}

Bước 3: Click vào phần Chuyển đến tiện ích Stats1 và bấm vào đó.
Bước 4: Tại đây các bạn sẽ thấy code này:

<b:widget id='Label1' locked='false' title='Nhãn' type='Label' version='1'>

Và các bạn thay code đó thành code này:

<b:widget id='Label1' locked='false' title='Xem theo mục' 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> Chuyên Mục Nổi Bật </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>

Bước 5: Lưu lại và kiểm tra kết quả.

Vậy là xong. Chỉ cần vài thủ thuật đơn giản bạn đã có thể tạo nên phần Dropdown Nhãn cho Blogspot rồi. Chúc các bạn thành công và đừng quên truy cập Blog để xem thêm nhiều bài viết hay và bổ ích hơn nữa nhé!

Nguồn: HDTT