Load more post for Blogspot (using jquery)

Thích Code | January 23, 2018 | Edit Post

This is code help your blog auto load more post in page index or page item. Code not use extenal widget.

Code is using jquery

HTML
CSS
JS
View
Code by ThichCode.NET

//Code by ThichCode.NET
//address blogger need load
 var url = 'https://www.thichcode.net';
 
 //label need load - if label = "" then load default else load by label
 var label = "";
 
 //start index post
 var start_index = 1;
 
 //number post when load
 var max_result = 3; 
 
 //number error when load | i set = 5
 var loadError = 0;
 
 //function load
 function LoadMore(start, max)
   {
  //tag content post
  var div = $('#Blog1 ul');
  
  $('#loading').fadeIn();
  var html="";
  var _link = "";
  if (label != "") _link = url + "/feeds/posts/default/-/" + label + "?max-results=" + max + "&start-index=" + start + "&alt=json-in-script&callback=?";
  else _link = url + "/feeds/posts/default/?max-results=" + max + "&start-index=" + start + "&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++) {
      var html_category = "";
      for (var g = 0; g < json.feed.entry[i].category.length; g++) {
       //get category of post
                         html_category += "<a target='_blank' href='" + url + "/search/label/" + json.feed.entry[i].category[g].term + "' rel='tag'>" + json.feed.entry[i].category[g].term + "</a>";
                     }
                        if (json.feed.entry[i].link[j].rel == 'alternate') {
                            break;
                        }
                    }                         
     html_category = "<br/><br/><br/><b>Category</b> : " + html_category;
     
     //get image of post
                    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, 200) + "...";
                    html += "<li><img src='" + thumburl.replace("s1600", "s200-c") + "' alt='" + entryTitle + "'/><a href='" + entryUrl + "'><h3>" + entryTitle + "</h3></a><p style='text-align:justify;'>" + des + "</p>" + html_category + "</li>";
     html_category = "";
                    if (i == json.feed.entry.length - 1) {
      $('#loading').fadeOut();
                        div.append(html).fadeIn();      
                    }
                }
                errorLoad = 0;
    start_index = start + max;
    console.log(start_index);
    flag = true;
            },
            error: function(xhr, status, error) {
                loadError++;
                if (loadError < 5) LoadMore(start_index, max_result);
                else $('#loading').fadeIn().html("Error load data ! Please press F5 to continute...");
            }
        });
 }
 
 //Load post at first time
LoadMore(start_index, max_result);

$(document).on('scroll', function() {
   //check div "loadding" exits
   if ($('#loading').length) {
    //check scrool to div "loading"
    if($(this).scrollTop() >= $('#loading').position().top)
    {
     if (flag) { LoadMore(start_index, max_result); flag = false; }
    }
   }
  });

Thích Code | January 23, 2018 | Edit Post

ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.

Load more post for Blogspot (using jquery)

1 comment:

Most read

Latest