Tạo một tab label với Link RSS + hiển thị các bài viết của label đó

Pro label widget v1.0

[FD's BlOg] - Bài viết sử dụng thủ thuật tương tự Tiện ích Post Archive của Blogger, đó là click vào liên kết để sổ các bài viết có trong archive đó. Ở đây với Tab label này ta sẽ dùng java để thực hiện tương tự việc này. Ngòai ra tiện ích còn cho phép hiện thị link RSS ở mỗi label.

Hình minh họa kết quả :

Thủ thuật này mình sẽ cho tiện ích này hiện ở trên đầu của sidebar, các bạn muốn đặt vào vị trí nào khác thì cứ copy code của thủ thuật vào vị trí đó trong code template.
☼ Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Vào bố cục(Layout)
3. Vào chỉnh sửa code HTML(edit code HTML)
4. Chọn "Mở rộng mẫu tiện ích" (expand widget template)
5. Tìm đọan code bên dưới :

<b:section class='sidebar' id='sidebar' preferred='yes'>

- Code này là để xác định vị trí đặt tiện ích này, nếu bạn muốn đặt sau một tiện ích nào khác thì cứ làm tương tự, ví vụ muốn đặt tiện ích này sau tiện ích HTML12 thì tìm code của widget HTML12, như code bên dưới

<b:widget id='HTML12' locked='false' title='' type='HTML'>
<b:includable id='main'>
...
...
...
</b:includable>
</b:widget>
{code của tiện ích này sẽ dán ở đây}

6. Trở lại với thủ thuật, sau khi tìm được code ở bước 5, ta dán code bên dưới vào ngay sau dòng code tìm được:

<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)'>▼</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>

- Lưu ý:

+ http://YOURBLOG-URL.blogspot.com/ : thay bằng địa chỉ blog của bạn
+ http://fandung.110mb.com/JS-files/show_prev_item_in_label.js : nên down file này về và up lên host riêng của mình, tránh dùng chung sẽ gặp trường hợp hết bandwitdh (chỉ là phòng hờ, nếu ai không có host riêng thì xài link trên vẫn được)
+ http://farm4.static.flickr.com/3589/3526202950_6f1e32777f_o.png : địa chỉ ảnh của icon link RSS
+ Label12 : id của widget, thực ra bạn muốn đặt tên gì cũng được, đặt Label12 để dễ quản lí các widget của mình , cố gắng không để trùng với các id khác.
+ Posts in tab label : tiêu đề của widget, có thể bỏ trống.
+ max_rc_posts = 10; : đây là code cho phép hiển thị tối đa số bài viết ở mỗi label, có thể thay số 10 thành số bài viết mà bạn muốn hiển thị.
+ kí tự ▼ : có thể thay thế bằng kí tự khác, hoặc icon hình ảnh đều được, tùy bạn chọn.

7. Save template.

Đôi lời về thủ thuật này : thủ thuật này sẽ hiển thị tất cả các nhãn có trong blog của bạn, tuy nhiên đối với những ai chỉ muốn hiển thị những nhãn có số bài viết lớn(ví dụ hiển thị những nhãn có bài viết lớn hơn 20 chẳng hạn) thì thủ thuật này chưa đáp ứng được. Mình có tham khảo code Java về thủ thuật chỉ cho hiển thị những nhãn có số bài viết lớn hơn 1 số định sẵn, nhưng khi đem áp dụng vào thì thủ thuật không chạy được, nên mình không giới thiệu được thủ thuật này cho các bạn. Về code Javascript thì mình không rành lắm, như chúng ta đã biết, lập trình java là một trong các ngôn ngữ lập trình khó. Vì thế ai rành về java có thể chỉ giáo thêm cho mình với nhé.

Nguồn : tham khảo từ elescaparatederosa

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