Tiện ích bài đăng mới nhất nhiều tùy chỉnh cho Blogger

Gần đây có một người hỏi về tiện ích bài đăng mới nhất cho Blogger, trước đây mình cũng đã chia sẻ tiện ích này rồi, nhưng có vẻ ít chức năng quá thế nên hôm qua sau một thời gian tìm kiếm thì mình đã tìm ra một tiện ích bài đăng mới nhất khá nhiều tùy chỉnh, mình có chỉnh sửa lại cấu trúc mặc định của nó và chia sẽ lại đây cho mọi người cùng sử dụng.

Tiện ích bài đăng mới nhất nhiều tùy chỉnh cho Blogger

Sau khi mình tùy chỉnh lại một số thứ thì thì tiện ích này tạm có chức năng hầu khá tương tự với tiện ích bài viết liên quan mà mình có chia sẻ trước đây, tức là có thêm tùy chọn hiển thị số ngày đăng và nhận xét cũng như vài thứ lặt vặt nhỏ nữa. Bạn nào muốn xem demo thì truy cập vào đây: http://kslflatly.blogspot.com

Tiện ích bài đăng mới nhất nhiều tùy chỉnh cho Blogger

Đăng nhập vào Blogger và tìm đến phần Bố cục của blog bạn.

Thêm một tiện ích HTML mới và thêm đoạn mã sau đây vào
<style type='text/css'>
img.recent_thumb {padding-right:0.4em;width:72px;height:72px;border:0;
float:left;margin: 0 5px 5px 0;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
</style>
<script style='text/javascript'>
function showrecentpostswiththumbs(json) {
    document.write('<ul class="recent_posts_with_thumbs">');
    for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commenttext = entry.link[k].title;
                var commenturl = entry.link[k].href
            }
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break
            }
        }
        var thumburl;
        try {
            thumburl = entry.media$thumbnail.url
        } catch (error) {
            s = entry.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 = 'http://www.webaholic.co.in/other/no-image.jpg'
        }
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        document.write('<li class="clearfix">');
        if (showpostthumbnails == true) document.write('<img class="recent_thumb" src="' + thumburl + '"/>');
        document.write('<b><a href="' + posturl + '" target ="_top">' + posttitle + '</a></b><br>');
        if ("content" in entry) {
            var postcontent = entry.content.$t
        } else if ("summary" in entry) {
            var postcontent = entry.summary.$t
        } else var postcontent = "";
        var re = /<\S[^>]*>/g;
        postcontent = postcontent.replace(re, "");
        if (showpostsummary == true) {
            if (postcontent.length < numchars) {
                document.write('<div>');
                document.write(postcontent);
                document.write('</div>')
            } else {
                document.write('<div>');
                postcontent = postcontent.substring(0, numchars);
                var quoteEnd = postcontent.lastIndexOf(" ");
                postcontent = postcontent.substring(0, quoteEnd);
                document.write(postcontent + '...');
                document.write('</div>')
            }
        }
        var towrite = '';
        var flag = 0;
        document.write('<br><span>');
        if (showpostdate == true) {
            towrite = towrite + cdday + '/' + cdmonth + '/' + cdyear;
            flag = 1
        }
        if (showcommentnum == true) {
            if (flag == 1) {
                towrite = towrite + ' - '
            }
            if (commenttext == '1 ' + rcp_comment) commenttext = '1 ' + rcp_comment;
            if (commenttext == '0 ' + rcp_comment) commenttext = '0 ' + rcp_comment;
            commenttext = '<a href="' + commenturl + '" target ="_top">' + commenttext + '</a>';
            towrite = towrite + commenttext;
            flag = 1
        }
        if (displaymore == true) {
            if (flag == 1) towrite = towrite + ' | ';
            towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top">' + rcp_readmore + '</a>';
            flag = 1
        }
        document.write(towrite);
        document.write('</span></li>');
        if (displayseparator == true)
            if (i != (numposts - 1)) document.write('<hr size=0.5>')
    }
    document.write('</ul>')
}
</script>
<script style='text/javascript'>
var rcp_comment = 'Nhận xét';
var rcp_readmore = 'Đọc tiếp';
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 150;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
sau khi chèn bạn hãy tùy chỉnh lại theo ý của bạn với:
  • rcp_comment, rcp_readmore: đơn giản chỉ là đoạn chữ thay thế cho comment  và readmore
  • numpost: số lượng bài viết.
  • showpostthumbnails: ẩn hiện ảnh thumbnail.
  • displaymore: ẩn hiện nút readmore.
  • displayseparator: ẩn hiện đường phân cách hr giữa mỗi bài.
  • showpostdate: ẩn hiện ngày đăng bài.
  • showpostsummary: ẩn hiện đoạn trích từ bài viết.
  • numchars: số lượng ký tự lấy ra cho đoạn trích dẫn.
ngoại trừ 2 đoạn văn bản thay thế cho comment và readmore thì các tùy chỉnh khác sẽ có 2 lựa chọn với true (đúng) và false (sai). Ngoài ra bạn có thể tự tùy chỉnh lại phần css để nó trông đẹp hơn rồi lưu lại.

Lời kết

Tiện ích bài đăng mới nhất là một trong những tiện ích khá hay, như mình đã nói ở "bài viết mới nhất dạng hình ảnh cho Blogger", khách truy cập của chúng ta xuất phát hầu hết ở các công cụ tìm kiếm nên nếu chúng ta thêm những tiện ích như thế này sẽ giúp cho khách truy cập biết được những thứ gì mới nhất trên website của chúng ta, từ đó khách sẽ ở lại lâu hơn trên website và dễ dàng có cơ hội kiếm tiền được nhiều hơn nếu bạn đang bán quảng cáo. Mọi thắc mắc về tiện ích này cứ tha hồ - thoải mái để lại nhận xét phía dưới nhé!

8 bình luận

  1. avatar says

    lúc 09:26 23 tháng 8, 2014

    bạn có thể chỉ mình cách chèn tiện ích có cả bài mới và bài hot luôn không trang của mình xin cho ý kiến sửa đổi: http://stu247.blogspot.com/

  2. avatar says

    lúc 20:47 24 tháng 11, 2014

    blog của em có vài vấn đề, bác giúp em nhé. Chi phí em sẽ đưa bác hihi. Bác lấy em rẽ thui nhớ. Em là sinh viên, cặm cụi với nó 1 tháng rồi mà vẫn chưa tối ưu được.

  3. avatar says

    lúc 08:07 25 tháng 11, 2014

    Blog bị những vấn đề gì bạn :D

  4. avatar says

    lúc 20:23 23 tháng 1, 2015

    thanks bạn. Tiện ích rất đẹp

  5. avatar says

    lúc 12:11 1 tháng 12, 2015

    bạn ơi cho mình hỏi mình thêm tiện ích này thì nó show cã hình ảnh thu nhỏ ngày tháng tên tác giả
    mặc dù đã chọn false hết làm sao để xóa phần tên tác giả đi cậu nhỉ
    thank cậu nhiều :)

  6. avatar says

    lúc 10:14 6 tháng 12, 2015

    Mình nhớ là nó đâu có hiện tên tác giả đâu ta, bạn cho mình demo được không?

  7. avatar says

    lúc 00:47 8 tháng 6, 2016

    Rất hay! Cám ơn bạn... nó chỉ có 1 điểm yếu là Video thì nó o hiển thị hình ảnh thôi, còn lại tuyệt

  8. avatar says

    lúc 14:32 15 tháng 7, 2016

    Cảm ơn bạn, tiện ích rất hay.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.