Hiển thị Featured Posts trong Blogger

Featured Posts là một widget cũng được khá nhiều blogger sử dụng. Nó giúp độc giả biết được những bài viết nào nên xem nhất. Bài viết này mình sẽ hướng dẫn các bạn tạo một widget như vậy cho Blogger.










Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ đóng ]]></b:skin>:

/* Featured Posts Widget / kjmagic.blogspot.com */
.label_with_thumbs {
    float: left;
    padding: 0px;
}
.label_with_thumbs li {
    float: left;
    margin-bottom: 20px;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 20px;
}
.label_with_thumbs img {
    float: left;
    margin-right: 10px;
    border: 1px solid #ddd;
}
.label_with_thumbs h2 {
    font-size: 16px;
    margin: 0px;
    font-weight: bold;
}
.label_with_thumbs br {
    margin: 0px;
    padding: 0px;
}

Bước 2: Chèn đoạn code sau vào trước thẻ đóng </head>:

<!--Featured Post Widget / kjmagic.blogspot.com-->
<script>
//<![CDATA[
function labelthumbs(w) {
    document.write('<ul class="label_with_thumbs">');
    for (var v = 0; v < numposts; v++) {
        var f = w.feed.entry[v];
        var g = f.title.$t;
        var z;
        if (v == w.feed.entry.length) {
            break
        }
        for (var r = 0; r < f.link.length; r++) {
            if (f.link[r].rel == "replies" && f.link[r].type == "text/html") {
                var n = f.link[r].title;
                var o = f.link[r].href
            }
            if (f.link[r].rel == "alternate") {
                z = f.link[r].href;
                break
            }
        }
        var j;
        try {
            j = f.media$thumbnail.url
        } catch (q) {
            s = f.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 != "")) {
                j = d
            } else {
                j = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCj1j00jAXTPwz3prFxjn5DeqqRXrjAz9sbWI7WEyvE5lhnSZLHB3CwUiDa_y0ZETRTrPyFSl9k6jQ8Vtnbscc7gpDWYXncOU7ASd55iL4mIBFBCMUaLsExxCniEVXdena8NpRekEPw/s1600/no_image.jpg"
            }
        }
        var x = f.published.$t;
        var m = x.substring(0, 4);
        var l = x.substring(5, 7);
        var t = x.substring(8, 10);
        var h = new Array();
        h[1] = "Jan";
        h[2] = "Feb";
        h[3] = "Mar";
        h[4] = "Apr";
        h[5] = "May";
        h[6] = "Jun";
        h[7] = "Jul";
        h[8] = "Aug";
        h[9] = "Sep";
        h[10] = "Oct";
        h[11] = "Nov";
        h[12] = "Dec";
        document.write('<li class="clearfix">');
        if (showpostthumbnails == true) {
            document.write('<a class="picturelabela" href="' + z + '" target ="_top"><img class="label_thumb" src="' + j + '"/></a>')
        }
      document.write('<strong><h2><a class="titlelabel" href="' + z + '" target ="_top">' + g + "</a></h2></strong><br>");
        if ("content" in f) {
            var y = f.content.$t
        } else {
            if ("summary" in f) {
                var y = f.summary.$t
            } else {
                var y = ""
            }
        }
        var p = /<\S[^>]*>/g;
        y = y.replace(p, "");
        if (showpostsummary == true) {
            if (y.length < numchars) {
                document.write("");
                document.write(y);
                document.write("")
            } else {
                document.write("");
                y = y.substring(0, numchars);
                var e = y.lastIndexOf(" ");
                y = y.substring(0, e);
                document.write(y + "...");
                document.write("")
            }
        }
        var A = "";
        var u = 0;
        document.write("<br>");
        if (showpostdate == true) {
            A = A + h[parseInt(l, 10)] + "-" + t + " - " + m;
            u = 1
        }
        if (showcommentnum == true) {
            if (u == 1) {
                A = A + " | "
            }
            if (n == "1 Comments") {
                n = "1 Comment"
            }
            if (n == "0 Comments") {
                n = "No Comments"
            }
            n = '<a href="' + o + '" target ="_top">' + n + "</a>";
            A = A + n;
            u = 1
        }
        if (displaymore == true) {
            if (u == 1) {
                A = A + " | "
            }
            A = A + '<a href="' + z + '" class="url" target ="_top">More »</a>';
            u = 1
        }
        document.write(A);
        document.write("</li>");
        if (displayseparator == true) {
            if (v != (numposts - 1)) {
                document.write("")
            }
        }
    }
    document.write("</ul>")
};
//]]>
</script>
<!--End Featured Post Widget / kjmagic.blogspot.com-->

Bước 3: Lưu template. Vào Bố cục, tạo một tiện ích HTML/JavaScripts tại vị trí mà bạn muốn hiển thị widget và dán vào phần nội dung đoạn code bên dưới:

<!--Featured Post Widget / kjmagic.blogspot.com-->
<div class="MBL-Featureposts">
<script type='text/javascript'>
var numposts = 4; // Số bài viết hiển thị
var showpostthumbnails = true; // Nếu không muốn hiển thị ảnh thumbnail thì bạn thay true thành false
var displaymore = false; // Nếu muốn hiển thị nút Read more thì bạn thay false thành true
var displayseparator = false;
var showcommentnum = false; // Thay thành true nếu bạn muốn hiển thị số comment
var showpostdate = false; // Nếu muốn hiển thị ngày đăng thì thay false thành true 
var showpostsummary = true; // Hiển thị mô tả cho bài viết
var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Featured?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
</div>
<!--End Featured Post Widget / kjmagic.blogspot.com-->

Thay chỗ mình đánh dấu thành tên nhãn Featured Posts của bạn. Bây giờ lưu lại và xem kết quả.

Chúc các bạn thành công !