Reponsive widget bài viết theo nhãn ngoài trang chủ cho blogspot

Hello! xin chào các bạn. Trong bài viết trước mình có hướng dẫn các bạn cách tạo 3 cột widgets hiển thị bài viết theo nhãn ngoài trang chủ. Trong bài viết hôm nay mình cũng xin share code hiện tại longanit.com đang dùng. Code này mình đã tùy chỉnh lại phần code cũng như CSS. Lưu ý là code này cũng như code của bài viết trước mình kết hợp với Bootstrap để tạo vì thế bạn cứ an tâm là nó luôn hiển thị tốt trên các thiết bị di động bạn nhé.

Tạo Widget 3 cột hiển thị bài viết theo nhãn ngoài trang chủ

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới dán vào nơi mà bạn muốn hiển thị cột

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
<div class='container'>
 <div class='row'>
<div class='col-xs-12'>
 <b:section class='col-md-4' id='cot1'/>
<b:section class='col-md-4' id='cot2'/>
<b:section class='col-md-4' id='cot3'/>
</div>
</div>
 </div>
   </b:if> 

Bước 3: Tiến hành save lại và quay lại phần bố cục bạn sẽ thấy 3 Widgets với 3 cột tên là: cot1, cot2, cot3.

Hình minh họa 3 Widget sau khi tạo từ code 

Bước 4: Tiến hành copy các đoạn code bên dưới theo vị trí từng cột mình post nhé ( Phần thêm tiện ích của từng cột các bạn tự làm nhé.

1. Code Widget cot1:

<style>
/* Recent posts by labels widget by longanit.com*/
#cot1{background:white;border-bottom: 5px solid #337ab7;margin-bottom:20px;border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);border-right: 3px solid #f1f1f1;}
.longanit-seo h2{background:#0073aa;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.longanit-seo ul{list-style:none;margin:0;padding:0}
.longanit-seo li{text-indent:0;background:url(http://4.bp.blogspot.com/-TVFMWMC-lZw/UasMPl5QstI/AAAAAAAADVw/Th-PSA_b3SI/s1600/tag_blue.gif) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px;}
.longanit-seo h2 a:link, .longanit-seo h2 a:visited {color:#fff;}
</style>
<div id="longanit-seo" class="longanit-seo">
<h2><a href="/search/label/SEO">Kiến Thức SEO</a></h2>
<script type='text/javascript'>
numposts = 7;list1 =1; sumPosts = 168;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
    var s = a.split("<");
    for (var i = 0; i < s.length; i++) {
        if (s[i].indexOf(">") != -1) {
            s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)
        }
    }
    s = s.join("");
    s = s.substring(0, b - 1);
    return s
}
function showrecentposts(e) {
    img = new Array();
    for (var i = 0; i < numposts; i++) {
        var f = e.feed.entry[i];
        var g = f.title.$t;
        var h;
        if (i == e.feed.entry.length) break;
        for (var k = 0; k < f.link.length; k++) {
            if (f.link[k].rel == 'alternate') {
                h = f.link[k].href;
                break
            }
        }
        if ("content" in f) {
            var j = f.content.$t
        } else if ("summary" in f) {
            var j = f.summary.$t
        } else
        var j = "";
        s = j;
        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 != "")) img[i] = d;
        var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '">' + g + '</a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="longanit-seo"><ul>' + m
        }
        if ((i > list1) && (i < numposts - 1)) {
            var n = m
        }
        if (i == numposts - 1) {
            var n = m + '</ul></div>'
        }
        document.write(n)
    }
}
document.write("<script src=\"/feeds/posts/default/-/SEO?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>

2. Code Widget cot2:

<style>
/* Recent posts by labels widget by longanit.com*/
#cot2{background:white;border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);border-bottom: 5px solid #337ab7;border-right: 3px solid #f1f1f1;margin-bottom:10px}
</style>
<div id="longanit-seo" class="longanit-seo">
<h2><a href="/search/label/SEO Onpage">SEO Onpage</a></h2>
<script type='text/javascript'>
numposts = 7; list1 =1; sumPosts = 168;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
    var s = a.split("<");
    for (var i = 0; i < s.length; i++) {
        if (s[i].indexOf(">") != -1) {
            s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)
        }
    }
    s = s.join("");
    s = s.substring(0, b - 1);
    return s
}
function showrecentposts(e) {
    img = new Array();
    for (var i = 0; i < numposts; i++) {
        var f = e.feed.entry[i];
        var g = f.title.$t;
        var h;
        if (i == e.feed.entry.length) break;
        for (var k = 0; k < f.link.length; k++) {
            if (f.link[k].rel == 'alternate') {
                h = f.link[k].href;
                break
            }
        }
        if ("content" in f) {
            var j = f.content.$t
        } else if ("summary" in f) {
            var j = f.summary.$t
        } else
        var j = "";
        s = j;
        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 != "")) img[i] = d;
        var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '">' + g + '</a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="longanit-seo"><ul>' + m
        }
        if ((i > list1) && (i < numposts - 1)) {
            var n = m
        }
        if (i == numposts - 1) {
            var n = m + '</ul></div>'
        }
        document.write(n)
    }
}
document.write("<script src=\"/feeds/posts/default/-/SEO Onpage?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>

3. Code Widget cot3:

<style>
/* Recent posts by labels widget by longanit.com*/
#cot3{background:white;border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);border-bottom: 5px solid #337ab7;margin-bottom:10px}
</style>
<div id="longanit-seo" class="longanit-seo">
<h2><a href="/search/label/SEO Offpage">SEO Offpage</a></h2>
<script type='text/javascript'>
numposts =7; list1 = 1; sumPosts = 168;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
    var s = a.split("<");
    for (var i = 0; i < s.length; i++) {
        if (s[i].indexOf(">") != -1) {
            s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)
        }
    }
    s = s.join("");
    s = s.substring(0, b - 1);
    return s
}
function showrecentposts(e) {
    img = new Array();
    for (var i = 0; i < numposts; i++) {
        var f = e.feed.entry[i];
        var g = f.title.$t;
        var h;
        if (i == e.feed.entry.length) break;
        for (var k = 0; k < f.link.length; k++) {
            if (f.link[k].rel == 'alternate') {
                h = f.link[k].href;
                break
            }
        }
        if ("content" in f) {
            var j = f.content.$t
        } else if ("summary" in f) {
            var j = f.summary.$t
        } else
        var j = "";
        s = j;
        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 != "")) img[i] = d;
        var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '">' + g + '</a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="longanit-seo"><ul>' + m
        }
        if ((i > list1) && (i < numposts - 1)) {
            var n = m
        }
        if (i == numposts - 1) {
            var n = m + '</ul></div>'
        }
        document.write(n)
    }
}
document.write("<script src=\"/feeds/posts/default/-/SEO Offpage?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>

Tiến hành thay đổi tên nhãn tại các dòng chữ màu đỏ ở trên thành nhãn mà bạn muốn hiển thị.

Kết luận: Như vậy qua bái viết trên tôi đã hướng dẫn các bạn cách tạo Widget 3 cột hiển thị bài viết theo nhãn ngoài trang chủ cho blogspot. Chúc các bạn thành công!