Sitemap page với tùy chọn hiển thị bài viết theo nhãn tích hợp nút tải thêm và nhiều tùy chọn khác
vào
24 thg 12, 2018
Sau vài ngày nghiên cứu, chỉnh sửa, tham khảo ý kiến, mình đã code xong đoạn script hiển thị các bài viết mới và các bài viết mới theo nhãn với một số tùy chọn khá thú vị, mình tin chắc rằng khi bạn sử dụng code này bạn sẽ cảm thấy hài lòng.
Xem demo: https://www.vietblogdao.com/p/sitemap.html
Script mình viết sử jquery trong đó sử dụng phương thức ajax get feeds lấy dữ liệu hiển thị bài viết. với những tùy chọn sau:
- Sử dụng blogId: có thể sử dụng ID của bất kỳ Blog nào
- Cài đặt hiển thị:
- Hiển thị số bài viết
- Nút tải thêm bài viết
Ngoài ra, bạn có thể sử dụng code này cho widget hay chèn trực tiếp trong template sử dụng nguồn cấp như ví dụ template Việt Blogger Feeds của mình.
Bước 1: Tạo trang tĩnh sitemap mới, nếu đã có trang từ trước chọn chỉnh sửa trang. Để ý url của trang trên thanh địa chỉ trình duyệt có dạng như ví dụ sau:
Bạn lưu ID của Blog mình đánh dấu màu đỏ và ID của page mình đánh dấu màu xanh để làm cho các bước tiếp theo.
Bước 2: Trong soạn thảo hay chỉnh sửa trang, chọn tab HTML phía trên bên trái, sao chép đoạn code bên dưới vào:
Đặt tên ngắn cho trang ví dụ sitemap xong chọn Xuất bản hoặc Cập nhật trang
Bước 3: Vào Chủ đề > Chỉnh sửa HTML của template sao chép đoạn code sau trước thẻ đóng </body>
Bạn sửa lại ID của Blog mình đánh dấu màu đỏ và ID của page mình đánh dấu màu xanh trong đoạn code phía trên, phần cài đặt hiển thị các bạn xem tùy chọn Cài đặt hiển thị mà mình giới thiệu ở trên. Kiểm tra nếu như template đã có link jquery bạn có thể xóa link trong đoạn code trên.
Chọn Lưu chủ đề xong tải lại trang sitemap mà bạn vừa tạo mới hay chỉnh sửa. Đoạn css mình chỉ viết tương đối hiển thị với các phần tử trong code, khi áp dụng vào template của bạn bạn cần chỉnh sửa lại cho phù hợp.
Code được viết bởi tác giả Nguyễn Tuấn
Facebook: fb.com/kequaduongvodanh
 |
| Ảnh minh họa cho trang sitemap |
Xem demo: https://www.vietblogdao.com/p/sitemap.html
Giới thiệu
Script mình viết sử jquery trong đó sử dụng phương thức ajax get feeds lấy dữ liệu hiển thị bài viết. với những tùy chọn sau:
- Sử dụng blogId: có thể sử dụng ID của bất kỳ Blog nào
- Cài đặt hiển thị:
- numposts: số bài viết
- snippet: số từ tóm tắt đoạn trích
- showthumbnail: ảnh mặc định là true, không hiển thị sửa thành false
- showmeta: thông tin tác giả và ngày đăng mặc định là true, không hiển thị sửa thành false
- showsnippet: đoạn trích mặc định là true, không hiển thị sửa thành false
- Hiển thị số bài viết
- Nút tải thêm bài viết
Ngoài ra, bạn có thể sử dụng code này cho widget hay chèn trực tiếp trong template sử dụng nguồn cấp như ví dụ template Việt Blogger Feeds của mình.
Hướng dẫn cài đặt:
Bước 1: Tạo trang tĩnh sitemap mới, nếu đã có trang từ trước chọn chỉnh sửa trang. Để ý url của trang trên thanh địa chỉ trình duyệt có dạng như ví dụ sau:
Copy
https://draft.blogger.com/blogger.g?blogID=670287149123457733#editor/target=page;pageID=8342985181324680767;onPublishedMenu=pages;onClosedMenu=pages;postNum=0;src=pagename
Bạn lưu ID của Blog mình đánh dấu màu đỏ và ID của page mình đánh dấu màu xanh để làm cho các bước tiếp theo.
Bước 2: Trong soạn thảo hay chỉnh sửa trang, chọn tab HTML phía trên bên trái, sao chép đoạn code bên dưới vào:
Copy
<div class='breadcrumb'>
<button type='button'>Tất cả nhãn</button>
<ul class='hidden'>
<li>Tất cả nhãn</li>
</ul>
<div class='all_num_posts'></div>
<div class='num_posts'></div>
</div>
<div class='all_posts'>
<div class='blog-posts spinner load'></div>
<div class='show-posts'>
<button class='load-posts hidden' arial-label='Tải thêm bài đăng' role='button'>Tải thêm bài đăng</button>
<input id='numposts' type='hidden' value='0'/>
<input id='allposts' type='hidden' value=''/>
<div class='loadposts hidden'>Đang tải...</div>
</div>
</div>
<div class='label_posts hidden'>
<div class='blog-posts'></div>
<div class='show-posts'>
<button class='load-posts hidden' arial-label='Tải thêm bài đăng' role='button'>Tải thêm bài đăng</button>
<input id='numposts' type='hidden' value='0'/>
<input id='allposts' type='hidden' value=''/>
<div class='loadposts hidden'>Đang tải...</div>
</div>
</div>
Đặt tên ngắn cho trang ví dụ sitemap xong chọn Xuất bản hoặc Cập nhật trang
Bước 3: Vào Chủ đề > Chỉnh sửa HTML của template sao chép đoạn code sau trước thẻ đóng </body>
Copy
<b:if cond='data:blog.pageId == "8342985181324680767"'>
<style type='text/css'>/* <![CDATA[ */
.breadcrumb {
position: relative;
float: left;
width: 100%;
margin: 13px 0;
}
.breadcrumb button {
float: left;
position: relative;
background-color: transparent;
display: inline-block;
border: solid 1px #f0f1f5;
transition: border-color .3s;
border-radius: 3px;
padding: 0 30px 0 10px;
line-height: 30px;
cursor: pointer;
font-size: 15px;
outline: none;
}
.breadcrumb button:hover, .breadcrumb .num_posts span:hover, .breadcrumb .all_num_posts span:hover {
border-color: #0af;
transition: border-color .3s;
}
.breadcrumb .num_posts span, .breadcrumb .all_num_posts span {
float: right;
position: relative;
display: inline-block;
border: solid 1px #f0f1f5;
transition: border-color .3s;
border-radius: 3px;
padding: 0 10px;
line-height: 30px;
cursor: default;
font-size: 15px;
}
.breadcrumb button:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ROZHdN2dzQEeVP-l0ZHIhy1d-lYZxizSP-8YPs5aX-mU3LUOALyS_E_qyKM50607FHSKE_88AbRGnG4gZfEey_h8H6rN7zvg9LJIFNeRgYDJCHa-gzLwr8wUblkKx4yQ2bvln6kDyhju/s12/angle-down.png);
position: absolute;
right: 10px;
top: 1px;
}
.breadcrumb ul {
position: absolute;
left: 0;
top: 32px;
background: #ffffff;
border: 1px solid #ddd;
z-index: 9;
box-shadow: 0 1px 15px rgba(27, 31, 35, .15);
border-radius: 3px;
max-height: 396px;
max-width: 200px;
width: 100%;
overflow-y: auto;
}
.breadcrumb ul li {
cursor: pointer;
padding: 8px 13px;
display: block;
list-style-type: none;
}
.breadcrumb ul li:hover {background-color: #E4F0F6;}
.item {
position: relative;
display: block;
float: left;
width: 100%;
margin-bottom: 8px;
padding-bottom: 15px;
border-bottom: 1px dashed #e6ecf0;
}
.item:last-child {
margin: 0;
padding: 0;
border: 0;
}
.item a {
display: table;
color: #3c4043;
outline: none;
}
.item .post_thumb {
display: flex;
position: relative;
float: left;
width: 40%;
height: auto;
margin-right: 15px;
}
.item .post_thumb img {
height: 100%;
width: 100%;
border: solid 1px #f0f1f5;
transition: border-color .3s;
border-radius: 4px;
}
.item .post_thumb img:hover {
border-color: #0af;
transition: border-color .3s;
}
.item .post_title {
display: block;
font-size: 20px;
font-weight: normal;
line-height: 1.4em;
padding: 0 0 10px 0;
}
.item .post_title:hover {color: #365899;}
.item .post_meta {
display: table;
padding: 0 0 8px 0;
font-size: 15px;
font-weight: normal;
line-height: normal;
}
.item .post_date:before {
content: "-";
padding: 0 7px;
}
.item .post_snippet {
display: table;
font-size: 15px;
font-weight: normal;
line-height: 1.4em;
padding: 0;
}
.blog-posts.load {
height: 400px;
position: relative;
}
.show-posts {
float: left;
width: 100%;
text-align: center;
border-top: 1px dashed #e6ecf0;
margin-top: 15px;
padding: 15px 0;
}
.loadposts {
position: relative;
clear: both;
height: unset;
}
.show-posts .load-posts {
position: relative;
background: #f0f1f5;
border: solid 1px #f0f1f5;
transition: border-color .3s;
border-radius: 3px;
outline: 0;
padding: 0 30px 0 10px;
font-size: 15px;
color: #3c4043;
line-height: 30px;
cursor: pointer;
}
.show-posts .load-posts:hover {
border-color: #0af;
transition: border-color .3s;
}
.show-posts .load-posts:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ROZHdN2dzQEeVP-l0ZHIhy1d-lYZxizSP-8YPs5aX-mU3LUOALyS_E_qyKM50607FHSKE_88AbRGnG4gZfEey_h8H6rN7zvg9LJIFNeRgYDJCHa-gzLwr8wUblkKx4yQ2bvln6kDyhju/s12/angle-down.png);
position: absolute;
right: 10px;
top: 1px;
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 45%;
left: 48%;
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid hsl(0, 0%, 53.3%);
border-right-color: transparent;
animation: spinner .9s linear infinite;
-webkit-animation: spinner .9s ease-in-out infinite;
}
@media screen and (max-width: 414px) {
.item .post_title {font-size: medium;}
.item .post_snippet {
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3em;
}
}
@media screen and (max-width: 360px) {
.item .post_meta {padding: 0 0 5px 0;}
.item .post_author {display: none;}
.item .post_date:before {content:unset}
.item .post_snippet{-webkit-line-clamp: 3;line-height:1.2em;}
}
/* ]]> */</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
var blogId = "670287149123457733",
messagesposts = "Bài đăng",
numposts = 20,
snippet = 150,
showthumbnail = true,
showmeta = true,
showsnippet = true;
//<![CDATA[
function loadcontent(s){if(s.feed.entry)for(var t=0;t<s.feed.entry.length;t++){for(var a=0;a<s.feed.entry[t].link.length;a++)if("alternate"==s.feed.entry[t].link[a].rel){var e=s.feed.entry[t].link[a].href;break}var l,p=s.feed.entry[t].title.$t,o=s.feed.entry[t].author[0].name.$t,n=s.feed.entry[t].published.$t,i=n.substring(8,10)+" thg "+n.substring(5,7)+", "+n.substring(0,4),d=s.feed.entry[t].summary.$t;if((d=d.replace(/<\S[^>]*>/g,"")).length>snippet){var r=(d=d.substring(0,snippet)).lastIndexOf(" ");d=d.substring(0,r)+"..."}try{l=s.feed.entry[t].media$thumbnail.url.replace("s72-c","s320");var c=s.feed.entry[t].media$thumbnail.url,h=c.replace("s72-c","w320-h180-p-k-no-nu"),m=c.replace("s72-c","w400-h225-p-k-no-nu"),b=c.replace("s72-c","w640-h360-p-k-no-nu"),u=c.replace("s72-c","w1600-h900-p-k-no-nu")}catch(s){l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0or4Lg0RFsBYU41b0cy-GLbUjZYpdXY43WyctKgJnpf-ctmiUpfDB7YgTEKcJ0jvoZb5Ok26Zigr5wA5LRFYyul3vvM47jcwux5h0_xYS6dNInRxJYE27H7o28IlSexbIf6ohKq7BWvn9/s320/safe_image.png"}1!=showthumbnail&&1==showmeta&&1==showsnippet?$(".all_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_meta"><span class="post_author">'+o+'</span><span class="post_date">'+i+'</span></div><p class="post_snippet">'+d+"</p></a></article>"):1==showthumbnail&&1!=showmeta&&1==showsnippet?$(".all_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_thumb"><img alt="'+p+'" src='+l+' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="'+h+" 320w, "+m+" 400w, "+b+" 640w, "+u+' 1600w"/></div><p class="post_snippet">'+d+"</p></a></article>"):1==showthumbnail&&1==showmeta&&1!=showsnippet?$(".all_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_thumb"><img alt="'+p+'" src='+l+' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="'+h+" 320w, "+m+" 400w, "+b+" 640w, "+u+' 1600w"/></div><div class="post_meta"><span class="post_author">'+o+'</span><span class="post_date">'+i+"</span></div></a></article>"):1==showthumbnail&&1!=showmeta&&1!=showsnippet?$(".all_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_thumb"><img alt="'+p+'" src='+l+' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="'+h+" 320w, "+m+" 400w, "+b+" 640w, "+u+' 1600w"/></div></a></article>'):1!=showthumbnail&&1!=showmeta&&1==showsnippet?$(".all_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><p class="post_snippet">'+d+"</p></a></article>"):1!=showthumbnail&&1==showmeta&&1!=showsnippet?$(".all_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_meta"><span class="post_author">'+o+'</span><span class="post_date">'+i+"</span></div></a></article>"):1!=showthumbnail&&1!=showmeta&&1!=showsnippet?$(".all_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+"</div></a></article>"):$(".all_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_thumb"><img alt="'+p+'" src='+l+' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="'+h+" 320w, "+m+" 400w, "+b+" 640w, "+u+' 1600w"/></div><div class="post_meta"><span class="post_author">'+o+'</span><span class="post_date">'+i+'</span></div><p class="post_snippet">'+d+"</p></a></article>")}}function loadpost(s){if(s.feed.entry)for(var t=0;t<s.feed.entry.length;t++){for(var a=0;a<s.feed.entry[t].link.length;a++)if("alternate"==s.feed.entry[t].link[a].rel){var e=s.feed.entry[t].link[a].href;break}var l,p=s.feed.entry[t].title.$t,o=s.feed.entry[t].author[0].name.$t,n=s.feed.entry[t].published.$t,i=n.substring(8,10)+" thg "+n.substring(5,7)+", "+n.substring(0,4),d=s.feed.entry[t].summary.$t;if((d=d.replace(/<\S[^>]*>/g,"")).length>snippet){var r=(d=d.substring(0,snippet)).lastIndexOf(" ");d=d.substring(0,r)+"..."}try{l=s.feed.entry[t].media$thumbnail.url.replace("s72-c","s320");var c=s.feed.entry[t].media$thumbnail.url,h=c.replace("s72-c","w320-h180-p-k-no-nu"),m=c.replace("s72-c","w400-h225-p-k-no-nu"),b=c.replace("s72-c","w640-h360-p-k-no-nu"),u=c.replace("s72-c","w1600-h900-p-k-no-nu")}catch(s){l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0or4Lg0RFsBYU41b0cy-GLbUjZYpdXY43WyctKgJnpf-ctmiUpfDB7YgTEKcJ0jvoZb5Ok26Zigr5wA5LRFYyul3vvM47jcwux5h0_xYS6dNInRxJYE27H7o28IlSexbIf6ohKq7BWvn9/s320/safe_image.png"}1!=showthumbnail&&1==showmeta&&1==showsnippet?$(".label_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_meta"><span class="post_author">'+o+'</span><span class="post_date">'+i+'</span></div><p class="post_snippet">'+d+"</p></a></article>"):1==showthumbnail&&1!=showmeta&&1==showsnippet?$(".label_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_thumb"><img alt="'+p+'" src='+l+' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="'+h+" 320w, "+m+" 400w, "+b+" 640w, "+u+' 1600w"/></div><p class="post_snippet">'+d+"</p></a></article>"):1==showthumbnail&&1==showmeta&&1!=showsnippet?$(".label_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_thumb"><img alt="'+p+'" src='+l+' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="'+h+" 320w, "+m+" 400w, "+b+" 640w, "+u+' 1600w"/></div><div class="post_meta"><span class="post_author">'+o+'</span><span class="post_date">'+i+"</span></div></a></article>"):1==showthumbnail&&1!=showmeta&&1!=showsnippet?$(".label_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_thumb"><img alt="'+p+'" src='+l+' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="'+h+" 320w, "+m+" 400w, "+b+" 640w, "+u+' 1600w"/></div></a></article>'):1!=showthumbnail&&1!=showmeta&&1==showsnippet?$(".label_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><p class="post_snippet">'+d+"</p></a></article>"):1!=showthumbnail&&1==showmeta&&1!=showsnippet?$(".label_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_meta"><span class="post_author">'+o+'</span><span class="post_date">'+i+"</span></div></a></article>"):1!=showthumbnail&&1!=showmeta&&1!=showsnippet?$(".label_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+"</div></a></article>"):$(".label_posts .blog-posts").append('<article class="item"><a href='+e+' title="'+p+'" rel="noopener" target="_blank"><div class="post_title">'+p+'</div><div class="post_thumb"><img alt="'+p+'" src='+l+' sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="'+h+" 320w, "+m+" 400w, "+b+" 640w, "+u+' 1600w"/></div><div class="post_meta"><span class="post_author">'+o+'</span><span class="post_date">'+i+'</span></div><p class="post_snippet">'+d+"</p></a></article>")}}$.ajax({type:"GET",url:"https://www.blogger.com/feeds/"+blogId+"/posts/summary",data:{"max-results":numposts,alt:"json"},dataType:"jsonp",jsonp:"callback",jsonpCallback:"loadcontent",success:function(s){$(".all_posts .blog-posts").removeClass("spinner").removeClass("load");var t=s.feed.openSearch$totalResults.$t;$(".breadcrumb .all_num_posts").append("<span>"+t+" "+messagesposts+"</span>"),$(".all_posts #allposts").attr("value",t);for(var a=0;a<s.feed.category.length;a++){var e=s.feed.category[a].term;$(".breadcrumb ul").append("<li>"+e+"</li>")}$(".breadcrumb ul li:first-child").on("click",function(){var s=$(this).text();$(".breadcrumb button").text(s),$(".breadcrumb ul").addClass("hidden"),$(".all_posts").removeClass("hidden"),$(".label_posts").addClass("hidden"),$(".breadcrumb .all_num_posts").show(),$(".breadcrumb .num_posts").empty()}),$(".breadcrumb ul li:not(:first-child)").each(function(){$(this).on("click",function(s){$(".all_posts").addClass("hidden"),$(".label_posts").removeClass("hidden"),$(".label_posts .blog-posts").empty(),$(".label_posts .blog-posts").addClass("spinner").addClass("load");var t=$(s.target).text();$(".breadcrumb button").text(t),$(".breadcrumb ul").addClass("hidden"),$(".label_posts .show-posts").removeClass("hidden"),$(".label_posts #numposts").val(0),$(".breadcrumb .num_posts").empty(),$(".breadcrumb .all_num_posts").hide(),$.ajax({type:"GET",url:"https://www.blogger.com/feeds/"+blogId+"/posts/summary/-/"+t,data:{"max-results":numposts,alt:"json"},dataType:"jsonp",jsonp:"callback",jsonpCallback:"loadpost",success:function(s){$(".label_posts .blog-posts").removeClass("spinner").removeClass("load");var a=s.feed.openSearch$totalResults.$t;$(".breadcrumb .num_posts").append("<span>"+a+" "+messagesposts+"</span>"),$(".label_posts #allposts").attr("value",a),a>numposts?($(".label_posts .load-posts").removeClass("hidden"),$(document).off("click",".label_posts .load-posts").on("click",".label_posts .load-posts",function(s){$(".label_posts .loadposts").removeClass("hidden");var e=Number($(".label_posts #numposts").val());(e+=numposts)<a?($(s.target).addClass("hidden"),$(".label_posts #numposts").val(e),setTimeout(function(){$.ajax({type:"GET",url:"https://www.blogger.com/feeds/"+blogId+"/posts/summary/-/"+t,data:{"max-results":numposts,"start-index":e+1,alt:"json"},dataType:"jsonp",jsonp:"callback",jsonpCallback:"loadpost",success:function(){e+numposts<a?($(s.target).removeClass("hidden"),$(".label_posts .loadposts").addClass("hidden")):($(s.target).addClass("hidden"),$(".label_posts .loadposts,.label_posts .show-posts").addClass("hidden"))}})},500)):($(s.target).addClass("hidden"),$(".label_posts .loadposts,.label_posts .show-posts").addClass("hidden"))})):$(".label_posts .show-posts").addClass("hidden")}})})}),t>numposts?($(".all_posts .load-posts").removeClass("hidden"),$(document).off("click",".all_posts .load-posts").on("click",".all_posts .load-posts",function(s){$(".all_posts .loadposts").removeClass("hidden");var a=Number($(".all_posts #numposts").val());(a+=numposts)<t?($(s.target).addClass("hidden"),$(".all_posts #numposts").val(a),setTimeout(function(){$.ajax({type:"GET",url:"https://www.blogger.com/feeds/"+blogId+"/posts/summary",data:{"max-results":numposts,"start-index":a+1,alt:"json"},dataType:"jsonp",jsonp:"callback",jsonpCallback:"loadcontent",success:function(){a+numposts<t?($(s.target).removeClass("hidden"),$(".all_posts .loadposts").addClass("hidden")):($(s.target).addClass("hidden"),$(".all_posts .loadposts,.all_posts .show-posts").addClass("hidden"))}})},500)):($(s.target).addClass("hidden"),$(".all_posts .loadposts,.all_posts .show-posts").addClass("hidden"))})):$(".all_posts .show-posts").addClass("hidden")}}),$(".breadcrumb button").click(function(s){s.stopPropagation(),$(".breadcrumb ul").toggleClass("hidden")}),$(".breadcrumb ul").click(function(s){s.stopPropagation()}),$("html").click(function(){$(".breadcrumb ul").addClass("hidden")});
//]]></script>
</b:if>
Bạn sửa lại ID của Blog mình đánh dấu màu đỏ và ID của page mình đánh dấu màu xanh trong đoạn code phía trên, phần cài đặt hiển thị các bạn xem tùy chọn Cài đặt hiển thị mà mình giới thiệu ở trên. Kiểm tra nếu như template đã có link jquery bạn có thể xóa link trong đoạn code trên.
Chọn Lưu chủ đề xong tải lại trang sitemap mà bạn vừa tạo mới hay chỉnh sửa. Đoạn css mình chỉ viết tương đối hiển thị với các phần tử trong code, khi áp dụng vào template của bạn bạn cần chỉnh sửa lại cho phù hợp.
Code được viết bởi tác giả Nguyễn Tuấn
Facebook: fb.com/kequaduongvodanh
Nội dung chính
