Home » Thủ thuật blog
Pro label widget v1.1 - khắc phục hạn chế của bản v1.0
Thứ Hai, 18 tháng 5, 2009
[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ị
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://data.fandung.com/js/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)'>▼</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)'>▼</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://data.fandung.com/js/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)'>▼</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)'>▼</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.

- Tiện ích Top Commentators cho blogspot
- Chèn link Google Search vào footer của bài viết
- SlideTab Recent posts (jQuery)
- [Update] Tạo Menu Thanh menu ngang có sổ dọc xuống
- [3.0.2] Nâng cấp ANCMedia Player cho trang phim
- Ngẫu hứng Blogger (3)
- Ngẫu hứng Blogger (2)
- Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi.
- Blogger chính thức add avatar vào comment feed
- Share 3 template bloger đẹp cho anh em
- 12 cách giảm thời gian load trang cho bloger
- Blogger Templates Vector Responsive
Comments[ 0 ]
Đăng nhận xét