ThichCode.NET: Hàm Load Label trong Blogspot sử dụng jquery ThichCode.NET: Hàm Load Label trong Blogspot sử dụng jquery
ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.
Hàm Load Label trong Blogspot sử dụng jquery

Hàm Load Label trong Blogspot sử dụng jquery

Trong Blogspot, ta thường hay sử dụng hàm lấy bài viết theo label với callback, với cách lấy bài viết này, mình thấy khó sử dụng, không linh động với việc nhúng các javascript trong các widget. Vì vậy, hôm nay mình chia sẻ một cách load bài viết theo label mà không dùng callback.

Hàm Load Label trong Blogspot sử dụng jquery
Trong Blogspot, ta thường hay sử dụng hàm lấy bài viết theo label với callback, với cách lấy bài viết này, mình thấy khó sử dụng, không linh động với việc nhúng các javascript trong các widget. Vì vậy, hôm nay mình chia sẻ một cách load bài viết theo label mà không dùng callback.

Với hình ảnh demo bên trên thì mình lấy các truyện theo label Tác Giả, ở đây mình chỉ chú trọng tới lấy được dữ liệu, còn bố cục đẹp mắt ra sao thì chỉ cần bạn chỉnh sửa css một chút là được. Nếu có gì không hiểu, các bạn để lại câu hỏi bên dưới, mình sẽ giải đáp thắc mắc của bạn. Sau đây, mời các bạn cùng soi code để biết chi tiết hơn.

<script>
    var errorLoad = 0;

    function LoadLabel(title, div, label) {
        div.empty().append("<center>Đang tải dữ liệu...</center>");
        var html = "";
        var _link = "http://truyen.thichcode.net/feeds/posts/default/-/" + label + "?max-results=10&alt=json-in-script&callback=?";
        $.ajax({
            url: _link,
            type: "get",
            dataType: "jsonp",
            success: function(json) {
                for (var i = 0; i < json.feed.entry.length; i++) {
                    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
                        if (json.feed.entry[i].link[j].rel == 'alternate') {
                            break;
                        }
                    }

                    var thumburl = "";
                    try {
                        thumburl = entry.media$thumbnail.url;
                    } catch (error) {
                        s = json.feed.entry[i].content.$t;
                        a = s.indexOf("<img");
                        b = s.indexOf("src=\"", a);
                        c = s.indexOf("\"", b + 5);
                        d = s.substr(b + 5, c - b - 5);
                        if ((a !== -1) && (b !== -1) && (c !== -1) && (d !== "")) {
                            thumburl = d;
                        } else thumburl = "noimage";
                    }
                    if (thumburl.indexOf("blogspot") != -1) thumburl = thumburl.replace(/\/[0-9]+(\.bp\.blogspot)?/, "/lh4.googleusercontent");
                    var entryUrl = json.feed.entry[i].link[j].href;
                    var entryTitle = json.feed.entry[i].title.$t;
                    var str = "";
                    if ("content" in json.feed.entry[i]) str = json.feed.entry[i].content.$t;
                    else if ("summary" in json.feed.entry[i]) str = json.feed.entry[i].summary.$t;
                    var des = str.replace(/<\/?[^>]+(>|$)/g, "").substring(0, 110) + "...";
                    if (str.indexOf("[") != -1) {
                        var tmp = str.substring(str.indexOf("[") + 1, str.indexOf("]")).split("-");
                        str = "<span class='active' style='position:static'>" + tmp[0] + " - " + tmp[1] + "</span>"
                    } else str = "Đang cập nhật";
                    html += "<li style='border-bottom: 1px solid #66bbdd;margin-bottom: 10px;'><a href='" + entryUrl + "'><div class='Image'><img style='width:72px;height:96px;margin-right:10px;float:left' src='" + thumburl.replace("s1600", "s100") + "' alt='" + entryTitle + "'/></div></a><div style='text-align:justify;line-height:1.5'><a href='" + entryUrl + "'><h3>" + entryTitle + "</h3></a>" + des + str + "</div></li>";
                    if (i == json.feed.entry.length - 1) {
                        div.empty().append("<h2>" + title + "</h2><ul>" + html + "</ul>").fadeIn();
                    }
                }
                errorLoad = 0;
            },
            error: function(xhr, status, error) {
                loadError++;
                if (loadError < 5) Loadlabel(_Label);
                else _Label.empty().append("Lỗi load dữ liệu !");
            }
        });
    }

    //Gọi hàm tại đây
    LoadLabel("Truyện cùng tác giả", $("#HTML4"), label);
</script>
Chúc các bạn thành công !

5 comments:

  1. Hàm LoadLabel(title, div, label). Chú ý div là tên thẻ div. Ví dụ: div = $('#quang_cao') //có nghĩ là gán thẻ div là thẻ có id='quang_cao'.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. blog cua là http://tintucdodayblog.blogspot.com/. Mình sử dụng theme Ajustmag. Nhuwnhg khi vào label thì nó không hiển thị. http://tintucdodayblog.blogspot.com/search/label/Du%20L%E1%BB%8Bch

    Nhờ bạn giúp đỡ

    ReplyDelete
  4. Vẫn chưa làm được bạn à. Giải mả thì mình làm rồi, vấn đề làm sao biết nó sao chổ nào. Code related chỉ là đề cập các định dạng theo kiểu báo chí thôi.Ngoài ra mình cũng có hai thắc mắc khác là với Định dạng mã hexa sau khi giải mã mình chép lại vào blog với cú pháp như thế nào mới hợp lệ.

    Nhờ bạn giúp đỡ. Thank.

    ReplyDelete
    Replies
    1. Mình thấy blogpost bạn đã hiển thị bài viết theo label rồi (http://tintucdodayblog.blogspot.com/search/label/Du%20L%E1%BB%8Bch).

      Do bạn để cái AAMR THU (HTML73) hiển thị ở trang /search/label nên ko thấy rõ, dưới widget đó là các bài viết được seach theo label Du Lịch

      Delete

Most read

Latest