Home » Thủ thuật blog
Tạo List catalog từ các nhãn

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.
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 < 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 < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < 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 < 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&callback=listEntries2');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
for (var i=0; i < 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.

- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- 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
Comments[ 0 ]
Đăng nhận xét