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.

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 !
Bài trước
Bài sau

Thíchcode.NET - Mang lại giải pháp cho coder. Nếu các bạn có gì khó khăn trong lập trình thì liên hệ chúng tôi (FanFace). Chúng tôi sẽ hỗ trợ miễn phí cho các bạn.

7 nhận xét:

  1. vào bố cục thêm tiện ích java crip rồi copy code nầy post vào hả bạn . chỉnh sửa http://www.thichcode.net/ lại thành link blogpsot của mình rồi sao nữa bạn :)

    Trả lờiXóa
    Trả lời
    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'.

      Xóa
  2. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  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 đỡ

    Trả lờiXóa
    Trả lời
    1. Bạn dùng tool này http://www.thichcode.net/2016/10/chia-se-tool-decrypt-javascript-dang-hex.html để giải mã javascript từ file http://cdn.rawgit.com/bungfian/all/master/related.js. Sau khi giải mã xong, bạn debug từ code xem sao. Không hiện Label là do file related.js. Chúc bạn thành công !

      Xóa
  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.

    Trả lờiXóa
    Trả lời
    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

      Xóa

Hỗ trợ