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-downZoom (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 style thà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]

12 Nhận xét on "Tạo Multi-Style Label cho Blogger"

Pika Rock on 24 July 2009 at 18:38 said...

yeh`, code hay ;)

MMO on 25 July 2009 at 00:57 said...

thanks for your site

Connect with me now.

you are always welcome to me.

Best regard @

LouLou on 26 July 2009 at 18:49 said...

ồ cái này hay thiệc, thanks bác boy :X

LouLou on 26 July 2009 at 18:57 said...

khi cài ko Mở rộng mẫu tiện ích đúng ko bác ?

boyproDX on 26 July 2009 at 21:59 said...

@Pika Rock : Thanks :D
@MMO : Thanks for inviting me , really glad that you like my blog :)
@LouLou : Uhm, chỉ chèn đè lên thôi là ok. Khi nào cần edit thì mới bật Mở rộng ;)

♂..V!Ø|€† ♥ M¥ |_!ŋђ..♀ on 27 July 2009 at 13:25 said...

Mình mún dùm chế độ ZOOM thôi, đc ko bạn !!! ;;)

boyproDX on 27 July 2009 at 20:28 said...

@V!Ø|€† ♥ M¥ |_!ŋђ : Del bớt mấy dòng function của các chế độ khác và những đoạn 'râu ria' là xong :)
Code here .

♂..V!Ø|€† ♥ M¥ |_!ŋђ..♀ on 27 July 2009 at 21:30 said...

Cho nó nằm gần nhau trên một hàng đc ko bạn, chứ nằm dọc, chiếm dụng chỗ wo' !!!

boyproDX on 28 July 2009 at 22:47 said...

Mở lại file code ở trên, tìm thẻ br/. Xóa nó đi rồi thay thế bằng kí tự khác như , ; (dấu phẩy, chấm phẩy)

♂..V!Ø|€† ♥ M¥ |_!ŋђ..♀ on 3 August 2009 at 20:20 said...

Hihi, thks nhìu. Làm đc oy` :D

ca_sac on 12 October 2009 at 19:19 said...

cái này hay thật. Sẵn đây cho mình hỏi tại sao mình đăng một bài trong Blogspot rồi vào Google tìm thì không thấy. Ví dụ mình viết bài có tựa đề "vẽ điện thoại di động bằng corel". sau đó mình vào google tìm đúng như vậy nhưng không thấy. giúp mình với nha. mail: truongthanhtu2005@gmail.com

KakA on 21 September 2012 at 16:55 said...

bạn cho mình add liên kết vs nhé

http://khongphaixoan.blogspot.com/p/trao-oi-link.html

BloG Không Phải "Xoắn"

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3