Tạo List catalog từ các nhãn cho Blogger

Tiếp tục các thủ thuật về nhãn (label), bài viết này mình xin giới thiệu cho các bạn một thủ thuật tạo widget hiển thị các bài viết của của các nhãn theo kiểu danh sách catalog. Với mỗi nhãn là 1 catalog.
Thủ thuật này cho phép bạn tùy chọn các nhãn muốn hiển thị trong list catalog.

 

Thủ thuật cho Blogspot:

>> Danh sách thủ thuật cho Blogger-Blogspot

>> Tạo 'Read More' (đọc tiếp) một cách tự động - Hỗ trợ ảnh thumbnail

>> Tạo link "Top of Page" - Về đầu trang cho Blogger

 

Hình minh họa thủ thuật:

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 HTML2 thì tìm code của widget HTML2, như code bên dưới

<b:widget id='HTML2' 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='HTML99' locked='false' title='List Catalog' type='HTML'>
<b:includable id='main'>
<!-- <b:if cond='data:blog.pageType == "item"'> -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='data2006'/>
<script type='text/javascript'>
var homeUrl2 = "fandung.blogspot.com";
var labels = ["label1","label2","label3","label4"];
// Given a json label search, this function return the decoded label.
function getLabelFromURL(json) {
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
}
function listEntries2(json) {
var ul = document.createElement('ul');
for (var i = 0; i &lt; json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl2.length+21);
var label = getLabelFromURL(json);
var txt = document.createTextNode(label);
var h = document.createElement('h4');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2006').appendChild(div1);
}
}
}
function search2(query, label) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&amp;callback=listEntries2');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
for (var i=0; i &lt; labels.length; i++)
if (labels[i])search2(homeUrl2, labels[i]);
</script>
</div>
<b:include name='quickedit'/>
<!-- </b:if> -->
</b:includable>
</b:widget>

- Lưu ý :

+ HTML99 : ID mà ta gán cho widget, sở dĩ đặt HTML99 là để tránh trùng với các ID khác
+ fandung.blogspot.com : thay bằng địa chỉ blog của bạn
+ "label1","label2","label3","label4" : là danh sách các nhãn bạn muốn dùng để tạo catalog

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

phattrien▲so theo blog phandung

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.