chia ô theo Label ở trang chủ

    
     Với thủ thuật này, trang chủ của bạn sẽ được chia thành 2 cột bao gồm nhiều ô nhỏ, mỗi ô nhỏ là một nhãn (label), các bài viết trong nhãn này được hiển thị khá sinh động, ở trên là một bài viết mới nhất (có hình) kèm theo một vài mô tả cho bài viết và phía dưới là các tiêu đề bài viết kế tiếp (số lượng do bạn tuỳ chọn)...

Bạn chỉ cần đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML .

Sau đó, dán toàn bộ code phía dưới vào: 

<div align="center">
<table bgcolor="transparent" border="0" cellpadding="2" cellspacing="6" width="900">
<tbody><tr>
<td><style type="text/css">
#itechplus-rc {width:350px;margin:0;padding:10px;overflow:hidden;border:2px solid 
#817339;background:transparent}
.itechplus-rc h2{background:#E6A9EC;color:#2B1B17;line-height:1.6em;margin:0 0 16px;padding:4px 16px;text-align:center;font-weight:bold}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{textindent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilU-v9PMO6yJPXLhmitz7SmCU0FNqHS4To4BzHQ7nejIiZVaF2rgDnp7MZmrnZdOE45w7oGz-8FbMThbZvjueyEgBNY7PvUu3ZSufzJKaq4ZjzM_qzqHvmWJV5hzdMmaijPtx0oJqGGPNU/s1600/ngoi+sao+nh%E1%BB%8F+vang.gif) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}
</style>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://diemxua21.blogspot.com/search/label/blog?&amp;max-results=8">blog</a></h2>
<script type='text/javascript'>
numposts = 5; list1 = 1; sumPosts = 168;sumtitle = 36;
</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 + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="itechplus-rc"><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="http://www.diemxua21.blogspot.com/feeds/posts/default/-/blog?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Read more<a href="http://diemxua21.blogspot.com/search/label/blog">blog &#187;</a></p>
</div></td>

<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://diemxua21.blogspot.com/search/label/Tips?&amp;max-results=8">Tips</a></h2>
<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 + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="itechplus-rc"><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="http://www.diemxua21.blogspot.com/feeds/posts/default/-/Tips?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Read more<a href="http://diemxua21.blogspot.com/search/label/Tips"> Tips &#187;</a></p>
</div></td>
</tr>

<tr>
<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://diemxua21.blogspot.com/search/label/Notes?&amp;max-results=8">Notes</a></h2>
<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 + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="itechplus-rc"><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="http://www.diemxua21.blogspot.com/feeds/posts/default/-/Notes?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Read more<a href="http://diemxua21 .blogspot.com/search/label/Notes">Notes &#187;</a></p>
</div></td> 

<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://diemxua21.blogspot.com/search/label/Photos?&amp;max-results=8">Photos</a></h2>
<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 + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="itechplus-rc"><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="http://www.diemxua21.blogspot.com/feeds/posts/default/-/Photos?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">read more<a href="http://diemxua21.blogspot.com/search/label/Photos"> Photos &#187;</a></p>
</div></td>
</tr>
<tr>
<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://diemxua21.blogspot.com/search/label/video?&amp;max-results=8">video</a></h2>

<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 + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="itechplus-rc"><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="http://www.diemxu21.blogspot.com/feeds/posts/default/-/video?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">read more<a href="http://diemxua21.blogspot.com/search/label/video"> video &#187;</a></p>
</div></td>
</tr></tbody></table>
</div>

Bây giờ, các bạn thay đổi các số, các chữ ở các dòng lệnh màu xanh, đỏ, vàng theo ý thích của mình. Trong đó:

* bgcolor (màu đỏ): Màu nền của cả tiện ích

* Width (màu đỏ): Chiều rộng của cả tiện ích.

* Background: (màu đỏ): Màu nền của tiêu đề nhãn.

* Color: (màu đỏ): Màu chữ của tiêu đề nhãn.

* Center (màu đỏ): Canh lề cho tiêu đề nhãn (có thể đổi thành left hoặc right).

* Width (màu xanh): Chiều rộng của một ô.

* Border (màu xanh): Kích thước của đường viền ô nhỏ

* #E8A317 (màu xanh): Màu của đường viền ô nhỏ

* Background: (màu xanh): Màu nền của ô nhỏ.

* Numposts (màu xanh): Tổng số lượng bài hiển thị ở mỗi ô.

* List1 (màu xanh): Số lượng bài có hình.

* SumPost (màu xanh): Số lượng từ mô tả của bài có hình.

* Sumtile (màu xanh): Số lượng từ của mỗi tiêu đề bài.

* Còn lại các dòng lệnh màu vàng là các địa chỉ và tên của mỗi nhãn. Các bạn phải điền thật chính xác địa chỉ và tên nhãn thì thủ thuật này mới hiển thị, nếu không nó sẽ bị lỗi và chỉ hiển thị một khung trống.

* Mở rộng thêm: Nếu muốn thêm 2 nhãn nữa thì bạn copy đoạn code này và dán nó trên dòng lệnh:</tbody></table>

cuối cùng

<tr>
<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="label address?&amp;max-results=8">Label</a></h2>

<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 + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="itechplus-rc"><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="http://www.blog address/feeds/posts/default/-/LABEL?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Read more<a href="Label Address"> LABEL &#187;</a></p>
</div></td>


<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="label addess?&amp;max-results=8">LABEL</a></h2>

<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 + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '" title="' + g + '"><b>' + removeHtmlTag(g, sumtitle) + '...</b></a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="itechplus-rc"><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="http://www.Blog address/feeds/posts/default/-/LABEL?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Read more<a href="label address"> Label &#187;</a></p>
</div></td>
</tr>

Trên đây là code để làm thủ thuật chia nhãn thành các ô nhỏ, nếu muốn thủ thuật này chỉ hiển thị ở trang chủ thì bạn phải làm thêm các bước sau đây:

* Hiển thị widget ở trang chủ và ẩn ở các trang tiêu đề:
 http://diemxua12.blogspot.com/2012/11/cach-hien-thi-hoac-cac-widget.html

* Ẩn bài viết ở trang chủ :
http://diemxua12.blogspot.com/2012/11/an-bai-viet-o-trang-chu.html

Nguồn: dunghennessy.blogspot.com