Sitemap cho blogspot - Duy Phạm ver 3

1. Phiên bản gốc
2. Ver 2

Tính năng

1. Sắp xếp theo thứ tự số lượng bài viết trong nhãn
2. Hiển thị thêm tiêu đề của nhãn trên danh sách bài viết
3. Cho phép hiển thị bài viết thuộc một nhãn bất kỳ lần đầu (mặc định sẽ hiển thị các bài viết ở nhãn đầu tiên)
4. Tùy chọn mở cửa sổ mới cho link bài viết
5. Tùy chọn hiển thị số lượng nhận xét
6. Tùy chọn hiển thị thời gian đăng bài

Demo

Cài đặt

Update tính năng cho ver 3

1. Thêm thumbnail cho bài viết
2. Thay đổi phân trang theo số
3. Thêm chức năng sắp xếp bài viết theo thời gian mới - cũ

<div id='show-cat'></div>
<span class="right" id="toggleOrderSpan" style="cursor: pointer;">Mới nhất &#8645;</span>
<div id='show-post'>
<script type='text/javascript'>
var cat_home = 'https://www.blogspotvn.net'; // Link blogspot của bạn
var cat_numb = 5; // Số lượng bài viết hiển thị trên một trang
var cat_pre = '<i class="fas fa-chevron-double-left"></i>'; // Văn bản hiển thị nút trang trước
var cat_nex = '<i class="fas fa-chevron-double-right"></i>'; // Văn bản hiển thị nút trang sau
var cat_name;
var cat_start;
var cat_class;
var oldestFirst = false; 

document.getElementById('toggleOrderSpan').addEventListener('click', function() {
    oldestFirst = !oldestFirst; 
    var orderText = oldestFirst ? 'Cũ nhất &#8645;' : 'Mới nhất &#8645;';
    document.getElementById('toggleOrderSpan').innerHTML = orderText;
    updatePosts(); 
});

function updatePosts() {
    show_post(cat_name, cat_start, cat_class, oldestFirst); 
}

function show_post(a, b, c, orderByOldestFirst) {
    var d = document.getElementsByTagName('head')[0];
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.setAttribute('src', cat_home + '/feeds/posts/default/-/' + a + '?alt=json-in-script&start-index=' + b + '&max-results=' + cat_numb + '&orderby=published&reverse=' + orderByOldestFirst + '&callback=show_post2');
    d.appendChild(e);
    cat_name = a;
    cat_start = parseInt(b), cat_class = c;
}

function show_post2(a) {
    var tt = a.feed.openSearch$totalResults.$t;
    var dw = '';
    dw += '<div class="label-name"><h3><i class="fad fa-tags icon-link"></i> ' + cat_name + '</h3></div>';
    dw += '<div class="posts">';
    for (var i = 0; i < cat_numb && i < a.feed.entry.length; i++) {
        var entry = a.feed.entry[i];
        var cat_title = entry.title.$t;
        var cat_thumbnail = entry.media$thumbnail ? entry.media$thumbnail.url : 'https://via.placeholder.com/150';
        var cat_url = entry.link.find(link => link.rel === 'alternate').href;
        dw += '<div class="post">';
        dw += '<div class="post-thumbnail"><a target="blank" href="' + cat_url + '" rel="nofollow"><img src="' + cat_thumbnail + '" alt="' + cat_title + '"></a></div>';
        dw += '<a target="blank" href="' + cat_url + '" rel="nofollow">' + cat_title + '</a>';
        var numComments = entry.thr$total.$t || 0; 
        if (numComments) {
            dw += '<span class="comment"><i class="fad fa-comments"></i> ' + numComments + ' nhận xét</span> | '; 
        } else {
            dw += '<span>Chưa có bình luận</span>'; 
        }
        var publishedDate = new Date(entry.published.$t);
        var formattedDate = publishedDate.getDate().toString().padStart(2, '0') + '/' +
                            (publishedDate.getMonth() + 1).toString().padStart(2, '0') + '/' +
                            publishedDate.getFullYear().toString().substring(2);
        dw += '<span class="date"><i class="fad fa-clock"></i> ' + formattedDate + '</span>';
        dw += '</div>'
    }
    dw += '</div>';
    dw += '<div id="navi-cat">';

    var lastPageButtonDisplayed = false; 

    if (cat_start > 1) {
        dw += '<a href="" onclick="show_post(\'' + cat_name + '\',\'' + (cat_start - cat_numb) + '\',\'' + cat_class + '\',' + oldestFirst + ');return false">' + cat_pre + '</a>';
    }

    var numPagesToShow = 3; // Số lượng trang hiển thị trong một nhóm
    var currentPage = Math.ceil(cat_start / cat_numb); 
    var totalPages = Math.ceil(tt / cat_numb); 
    var startPage = Math.max(1, currentPage - Math.floor(numPagesToShow / 2)); 
    var endPage = Math.min(startPage + numPagesToShow - 1, totalPages); 

    if (startPage > 1) {
        dw += '<a href="" onclick="show_post(\'' + cat_name + '\',\'1\',\'' + cat_class + '\',' + oldestFirst + ');return false">1</a>';
        if (startPage > 2) {
            dw += '… ';
        }
    }

    for (var p = startPage; p <= endPage; p++) {
        if (p === currentPage) {
            dw += '<span class="current">' + p + '</span>';
        } else {
            dw += '<a href="" onclick="show_post(\'' + cat_name + '\',\'' + ((p - 1) * cat_numb + 1) + '\',\'' + cat_class + '\',' + oldestFirst + ');return false">' + p + '</a>';
        }
    }

    if (endPage < totalPages && totalPages > numPagesToShow && !lastPageButtonDisplayed) {
        if (endPage < totalPages - 1) {
            dw += '… ';
        }
        var lastPageStartIndex = (totalPages - 1) * cat_numb + 1;
        dw += '<a href="" onclick="show_post(\'' + cat_name + '\',\'' + lastPageStartIndex + '\',\'' + cat_class + '\',' + oldestFirst + ');return false">' + totalPages + '</a>';
        lastPageButtonDisplayed = true; 
    }

    if ((cat_start + cat_numb - 1) < tt) {
        dw += '<a href="" onclick="show_post(\'' + cat_name + '\',\'' + (cat_start + cat_numb) + '\',\'' + cat_class + '\',' + oldestFirst + ');return false">' + cat_nex + '</a>';
    }

    dw += '<span class="right">' + cat_start + ' &ndash; ' + Math.min(cat_start + cat_numb - 1, tt) + ' / ' + tt + '</span>';
    dw += '</div>';
    document.getElementById('show-post').innerHTML = dw + '<style type="text/css">.cat-' + cat_class + ' a{background:#bbb!important;color:#fff!important}<\/style>';
}

function show_cat(a) {
    var cat = a.feed.category;
    var cat_first_label = cat[0].term;
    show_post(cat_first_label, '1', '0', oldestFirst);
    var dw = '';
    dw += '<ul>';
    for (var i = 0; i < cat.length; i++) {
        dw += '<li class="cat-' + i + '">';
        dw += '<a href="" onclick="cat_name=\'' + cat[i].term + '\'; cat_start=\'1\'; cat_class=\'' + i + '\'; updatePosts(); return false;">';
        dw += cat[i].term;
        dw += '</a>';
        dw += '</li>';
    }
    dw += '</ul>';
    document.getElementById('show-cat').innerHTML = dw;
}
document.write('<script type="text/javascript" src="' + cat_home + '/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');</script>
</div>
<style type='text/css'>
#show-cat ul {
  margin:0;
  padding:0;
  list-style-type:circle;
}

#show-cat ul li {
  list-style-type:none;
  margin:0;
  border:1px solid #ccc;
  padding:0;
}

#show-cat {
  float:left;
  margin-right:2%;
  width:20%;
  height:715px;
  overflow-x:hidden;
  overflow-y:auto;
  line-height:18px;
}

.posts {
  margin:0;
  padding:0;
  border:1px solid #ccc;
  border-bottom: 0;
}

.post {
  border-bottom:1px solid #ccc;
  padding:16px 20px;
}

.posts a {
  display:block;
}

.post a,
#navi-cat a {
  color:#005b53;
  text-decoration:none;
}

.post-thumbnail {
  float:left;
  margin:5px 20px 0 0;
  width:72px;
  overflow:hidden;
}

.post-thumbnail img {
  height:72px;
  width:72px;
  border-radius:5px;
}

#show-cat ul li a {
  color:#005b53;
  text-decoration:none;
  display:block;
  padding:10px;
}
  
span.comment, span.date  {
    color: gray;
}  
  
.dark #show-cat ul li a{
  color:#eee;
}  
  
#show-cat ul li a:hover {
  background:#ccc;
  color:#fff;
}

.dark #show-cat .post a,
.dark #navi-cat a {
  background:#6a6a6a;
  color:#eee;
}

.posts a {
  font-size:12px;
  font-weight:bold;
  margin-bottom:10px;
}

#navi-cat a:hover {
  background:#ccc;
  color:#fff;
}

#show-post {
  float:left;
  width:78%;
}

#navi-cat {
  padding:20px 0;
}

#navi-cat a {
  margin-right:10px;
  border:1px solid #ccc;
}

#navi-cat a,
#navi-cat span {
  padding:5px 10px;
  margin-right: 10px;
}


#sidebar-wrapper,
#navigation,
#comments {
  display:none;
}

#main-wrapper {
  width:100%;
}

.label-name h3 {
  padding:0;
  margin-top:10px;
}

#show-cat::-webkit-scrollbar {
  background:#ddd;
  width:5px;
}

.dark #show-cat::-webkit-scrollbar {
  background:#000;
}

#show-cat::-webkit-scrollbar-thumb {
  background:#c1c1c1;
}

.container li {
  line-height:2em;
}

@media screen and (max-width:1094px) {
  #show-cat,
  #show-post {
    width:100%;
    height:auto;
  }
  #show-post {
    border-top:5px solid #ddd;
    margin-top:20px;
  }
  #show-cat ul li {
    float:left;
  }
}
</style>