• Đăng ký
  • Đăng nhập

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

📅 — 👀 1226 — 👦

Trang này có hữu ích không?

👍 Có (21)        👎 Không (21)


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 !

Để lại một bình luận


📁 Blogspot, Code Demo