Pro label widget v1.1 - khắc phục hạn chế của bản v1.0

Pro label widget v1.1

[FD's BlOg] - Bài viết trước Pro label widget v1.0 ( Xem ở đây ) mình có giới thiệu thủ thuật tạo widget label với việc hiển thị link RSS và các bài viết của nhãn đó. Tuy nhiên ở thủ thuật trước có khuyết điểm là tất cả các label đều được hiển thị. Hôm nay thủ thuật này sẽ khắc phục được điều này.

Với phiên bản v1.0 mình đã không khắc phục được việc tất cả các label đều được hiển thị. Sau khi cho ra phiên bản v1.0, mình đã có thử vài cách để giới hạn (tùy chỉnh) số lượng label nhưng đều không được. Lần thử trước mình đã không nhìn sâu hơn, mà chỉ gói gọn trong cái ý tưởng là chèn thêm code java để chỉ cho phép các label có số bài nhất định được hiển thị (ví dụ cho các nhãn có số bài lớn hơn 10). Nhưng giờ mình đã tìm ra một cách đơn giản hơn, linh họat hơn, đó là sử dụng chính các dòng lệnh của blogger, mà không cần xài tới java. Với cách này ta có thể linh họat trong việc hiển thị các nhãn.

Xem hình mình họa:

Hình 1 là cho phép tất cả các nhãn hiển thị
Hình 2 là chỉ cho phép nhãn "blog" được hiển thị

Để thực hiện bài này bạn hãy đọc hướng dẫn ở bài viết Pro label widget v1.0 (xem ở đây).

Bây giờ ta sẽ đi trược tiếp vào đọan code chính của bản v1.0:

<b:widget id='Label12' locked='false' title='Posts in tab label' type='Label'>
<b:includable id='main'>

<script type='text/javascript'>
home_page = "http://YOURBLOG-URL.blogspot.com/";
max_rc_posts = 10;
</script>
<script src='http://fandung.110mb.com/JS-files/show_prev_item_in_label.js' type='text/javascript'/>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://farm4.static.flickr.com/3589/3526202950_6f1e32777f_o.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><b>
<data:label.name/></b> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel("" + data:label.name + "",event)"' href='javascript:void(0)'>&#9660;</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><b><data:label.name/></b></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel("" + data:label.name + "",event)"' href='javascript:void(0)'>&#9660;</a>
</b:if>

</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

- Bây giờ ta sẽ thêm các đọan code màu đỏ vào đọan code trên, (như bên dưới):

<b:widget id='Label12' locked='false' title='Posts in tab label' type='Label'>
<b:includable id='main'>

<script type='text/javascript'>
home_page = "http://YOURBLOG-URL.blogspot.com/";
max_rc_posts = 10;
</script>
<script src='http://fandung.110mb.com/JS-files/show_prev_item_in_label.js' type='text/javascript'/>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>

<b:if cond='data:label.name == "Label1"'>
<b:if cond='data:label.name == "Label2"'>
<b:if cond='data:label.name == "Label3"'>
<b:if cond='data:label.name == "Label4"'>

<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://farm4.static.flickr.com/3589/3526202950_6f1e32777f_o.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><b>
<data:label.name/></b> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel("" + data:label.name + "",event)"' href='javascript:void(0)'>&#9660;</a>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><b><data:label.name/></b></a>
<span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel("" + data:label.name + "",event)"' href='javascript:void(0)'>&#9660;</a>
</b:if>

</li>

</b:if>
</b:if>
</b:if>
</b:if>

</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

- Với : label1, label2. label3, label4 : là các nhãn được phép hiển thị trên widget.
- Save template là ok.

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