Loading post navigation ...
 
 

Pro page

3
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - 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.



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.


Enter your mail address:

3

phattrien▲so

Blog của bạn có nhiều bài rất hay, xin phép cho mình copy một số bài để post lên weblog của mình là www.vnpressnet.com để góp phần phổ biến bài viết của fan dung nhé.

Có gì comment lại cho mình nhé.

fandung

Cảm ơn lời khen từ phattrienso bạn có thể copy 1 số bài, chú thích nguồn là blog của mình là được.

Blog mình cũng còn thiếu nhiều thủ thuật, đang tính ghé những blog như bạn để bổ xung thêm :D

tano

chào Phan Dung
em muôn nó thể hiện theo hình ảnh từng hàng thì phải làm thế nào ak.. giống như trưng bày sản phẩm thì làm thế nào ak
cảm ơn!
như trang web này ak
http://htpspanail.blogspot.com/



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home