Mẫu bài viết mởi đăng cho blogger - Style 1

 humghn.com 

Trong một mẫu web/blog , việc tạo các nhãn " Bài đăng liên quan " , " Bài đăng phổ biến " ..v..v.. là thực sự quan trọng . Đó là những con đường nhỏ dẫn lượt xem tìm hiểu sâu hơn về web/blog của bạn . Trong bài viết này , chuyên mục cũng sẽ giới thiệu tới các bạn một tiện ích không kém phần quan trọng so với mục " Bài đăng liên quan " và " Bài đăng phổ biến " , mục có tên " Bài đăng mới nhất " .

Với mục này , người truy cập có khả năng theo dõi và cập nhật cho họ những bài viết mới trên site/blog của bạn những bài viết mà họ đang quan tâm nhưng chưa hề đọc , những bài viết đó thường mang tính chất " hot " và hút khách . Sau đây , mời bạn xem hình ảnh DEMO về mẫu

Ảnh DEMO

Cách thực hiện

Bước 1 : Đăng nhập " Bloger " , chọn " Bố cục " , sau đó thêm tiện ích " HTML/JavaScript " 

Bước 2 : Dán đoạn code sau vào tiện ích " HTML/JavaScript " vừa tạ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>

Tùy Chỉnh :
rcp_comment, rcp_readmore: 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.
Bước 3 : Lưu lại và tận hưởng thành quả
Chúc các bạn thành công !