Sitemap cho blogspot - Duy Phạm ver 3

Các phiên bản trước

Tính năng

Và bên dưới là một số các tính năng sitemap của phiên bản này

Sắp xếp theo thứ tự số lượng bài viết trong nhãn
Hiển thị thêm tiêu đề của nhãn trên danh sách bài viết
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)
Tùy chọn mở cửa sổ mới cho link bài viết
Tùy chọn hiển thị số lượng nhận xét
Tùy chọn hiển thị thời gian đăng bài

Demo

Cài đặt

Nhập địa chỉ:

Nhập số bài muốn hiển thị:

Nhập label muốn hiển thị bài viết đầu tiên: Nếu không nhập mặc định sẽ hiển thị các bài viết của nhãn đầu tiên

Nhập những label không muốn hiển thị: *Phân cách bằng dấu phẩy, nhập chính xác tên nhãn và phân biệt chữ Hoa thường

Mở cửa sổ mới khi click vào link bài viết

Hiển thị số lượng nhận xét

Hiển thị ngày tháng đăng bài viết

Update tính năng cho ver 3

Update ngày 05/03/2024
Click vào đây để xem Demo cho phiên bản này

Thêm thumbnail cho bài viết
Thay đổi phân trang theo số
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>

Ngại viết tool nên anh em thông cảm nhé, tự thay những gì mình đánh dấu tương ứng bằng thông tin của các bạn. Anh em tự khám phá thêm nhé, chúc mọi người một ngày vui. Đừng quên để lại nhận xét bên dưới nếu muốn góp ý nhé, cảm ơn!

Trong đoạn code trên một số icon mình có sử dụng font awesome nên sẽ không hiển thị đầy đủ nếu bạn không cài đặt font này

Blogspot Việt Nam

Sitemap cho blogspot - Duy Phạm ver 3

Tính năng

Demo

Cài đặt

Update tính năng cho ver 3

About the author

33 nhận xét

Widget bài này năm xưa giống Facebook

Tự ẩn liên kết nếu không update sau 1 khoảng thời gian

Loại bỏ link liên kết ngoài ở phần nhận xét

Thêm chức năng Bookmark cho blogspot

Image Lightbox có responsive và hoạt động thân thiện trên smart phone