Tạo Multi-Style Label cho Blogger

Có nhiều cách để trang trí cho widget Label trong Blogger, chẳng hạn dùng Flash Label hay sử dụng link định hướng đầu trang chủ (Navigation) ... Nếu bạn muốn dùng nhiều kiểu Label khác nhau để gây chú ý cho người đọc, hãy xem qua bài hướng dẫn này.


Multi-Style Label là widget tổng hợp 3 kiểu giao diện khác nhau cho Label như List danh sách thông thường,Menu Drop-down và Zoom (khá giống Tag Cloud). Bạn có thể tùy chỉnh dạng giao diện ưa thích bằng cách nhấn vào các nút điều khiển sẵn có trên widget. Ngoài ra, nó còn có chế độ Ẩn để tiết kiệm một phần không gian cho Blog. Mời bạn xem qua screenshot của Multi-Style Label :

Chế độ Ẩn (Nút ngoài cùng).

Dạng List (Nút thứ 2).

Dạng Menu Drop-down (Nút thứ 3).

Dạng Zoom (Nút cuối).

Để tạo được widget Label này, bạn hãy thực hiện tuần tự các bước sau :

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm đoạn code sau : (Template của bạn phải cài Label)
   
   
   
   <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
   
   Note: Nếu không tìm thấy, hãy search với từ khóa Label1.
   
   
   
   
   
   
   
   
3. Copy đoạn code sau và dán đè lên code mới tìm :
   
   
   
   <!-- Multi-style labels - zoom, menu and list styles -->
   <b:widget id='Label1' locked='false' title='Labels' type='Label'>
   <b:includable id='main'>
   <h2>Multi-style Labels</h2><br/>
   <div align='center'><a href='javascript:void' onclick='javascript:nullStyle();' title='Ẩn'><img src='http://img2.pict.com/ed/77/63/1284680/0/blank.png'/></a>
   <a href='javascript:void' onclick='javascript:linkStyle();' title='Hiển thị dạng danh sách'>
   <img src='http://img2.pict.com/67/5d/ae/1284679/0/list.png'/></a>
   <a href='javascript:void' onclick='javascript:menuStyle();' title='Hiển thị dạng Menu'>
   <img src='http://img2.pict.com/8e/d4/d6/1284682/0/menu.png'/></a>
   <a href='javascript:void' onclick='javascript:zoomStyle();' title='Hiển thị dạng Zoom'>
   <img src='http://img2.pict.com/61/60/bc/1284683/0/zoom.png'/></a></div><br/>
   
   <div class='widget-content'>
   <div id='LabelDisplay' align='center'>
   </div>
   </div>
   
   <script language='javascript' type='text/javascript'>
   function nullStyle() {
        var display = &quot;&quot;;
   
        obj = document.getElementById(&#39;LabelDisplay&#39;);
        obj.innerHTML = display;
     }
   
   function zoomStyle() {
   var max = 0;
   var min = 10000;
   <b:loop values='data:labels' var='label'>
   if (<data:label.count/> &gt; max)
   max = <data:label.count/>;
   if (<data:label.count/> &lt; min)
   min = <data:label.count/>;
   </b:loop>
   var display = "";
   <b:loop values='data:labels' var='label'>
   var delta = <data:label.count/> - min;
   var size = 100 + (delta * 100) / (max - min);
   display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
   </b:loop>
   
   obj = document.getElementById('LabelDisplay');
   obj.innerHTML = display;
   }
   
   function menuStyle() {
   var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
   <b:loop values='data:labels' var='label'>
   display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
   </b:loop>
   display = display + "</select>";
   
   obj = document.getElementById('LabelDisplay');
   obj.innerHTML = display;
   }
   
   function linkStyle() {
   var display = "<ul>";
   <b:loop values='data:labels' var='label'>
   display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
   </b:loop>
   display = display + "</ul>";
   
   obj = document.getElementById('LabelDisplay');
   obj.innerHTML = display;
   }
   
   // set default to zoom style
   linkStyle();
   </script>
   
   <b:include name='quickedit'/>
   </b:includable>
   </b:widget>
   
   
   
   
4. Save lại template và kiểm tra kết quả.

Mặc định Label sẽ hiển thị dạng danh sách (List), nếu không thích, bạn hãy sửa mục // set default to zoom stylethành dạng khác (nullStyle, menuStyle hay zoomStyle). Mình đã test thử và thấy Label chạy rất nhẹ, không tốn thêm bao nhiêu thời gian load Blog.
Hy vọng widget Multi-Style Label này sẽ làm bạn hài lòng. Chúc vui !

[Nguồn : nekki1409.blogspot.com]