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

Load more post cho Blogspot (sử dụng jquery)

📅 — 👀 536 — 👦

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

👍 Có (12)        👎 Không (10)


This is code help your blog auto load more post in page index or page item. Code not use extenal widget.[html]<!-- Code by ThichCode.NET -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<h1 class='text-center'>Test auto load for blogspot</h1>
</center>
<div id='Blog1'>
<ul></ul>
<div id='loading'>Loading data...</div>
</div>[/html][css]<!-- Code by ThichCode.NET -->
<style>
*{
margin: 0;padding: 0;
}
div {
margin: 20px;
}

ul {
list-style-type: none;
margin: 0 auto;
max-width: 600px;
}

h3 {
font: bold 20px / 1.5 Helvetica,
Verdana,
sans-serif;
}

li img {
float: left;
margin: 0 15px 0 0;
}

li p {
font: 200 12px / 1.5 Georgia,
Times New Roman,
serif;
}

li {
padding: 10px;
overflow: auto;
}

li: hover {
background: #eee;
cursor: pointer;
}
ul li img {
width: 200px;
}
ul li a {
text-decoration: none;
margin: 0 10px;
}
ul li p {
text-align: justify;
}
#loading {
display:none;
}
</style>[/css][js]<!-- Code by ThichCode.NET -->
<script>
//address blogger need load
var url = 'http://truyen.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 ;
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; }
}
}
});
</script>[/js]

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


📁 Blogspot
🔖