Home » Thủ thuật blog
Pro label widget v1.1 - khắc phục hạn chế của bản v1.0
[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.

- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
- Giải pháp Blogger bị chặn 02/07/2012
- Các truy vấn cơ bản với Blogspot
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Khắc phục hiện tượng chặn web của VNPT.
- Giải pháp VNPT chặn blogger ngày 09/06/2012
- Tạo thumb cho bài đăng phổ biến
Comments[ 0 ]
Đăng nhận xét