CHIA NHÃN (LABEL) THÀNH CÁC Ô

Trang chủ là nơi hiển thị tất cả các bài viết ở Web/Blog, tuỳ theo sở thích của người quản trị Web/Blog mà trang chủ được tuỳ biến một cách sinh động và trực quan hơn.

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)...

Mời các bạn bấm vào Xem thử phía dưới để thấy trước thủ thuật này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML (nếu chưa biết cách thêm tiện ích HTML/Javacript thì mời bạn xem TẠI ĐÂY).
Sau đó, dán toàn bộ code phía dưới vào.

<div align="center">
<table bgcolor="#ffffff" border="0" cellpadding="2" cellspacing="6" width="680">
<tbody><tr>
<td><style type="text/css">
#itechplus-rc {width:300px;margin:0;padding:10px;overflow:hidden;border:5px solid 
#E8A317;background:#000}
.itechplus-rc h2{background:#39c;color:#FFF;line-height:1.6em;margin:0 0 10px;padding:4px 10px;text-align:center;font-weight:bold}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTA_uMdn93j24leNU6ugHRiODI6wSRQhwLTd5IF4i_PrnZPmo11u1ulyaCGAO4Pdm28JZZsn7a5Vyss1MnokI13klOeW1ZBXAWK-7auTi3mOV_TaT14QRVx2cWuJ0QwNVRAtbb9qL1DLf/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://dunghennessy.blogspot.com/search/label/FLASH?&amp;max-results=8">Flash đẹp cho 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.dunghennessy.blogspot.com/feeds/posts/default/-/FLASH?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="http://dunghennessy.blogspot.com/search/label/FLASH"> Flash đẹp cho blog &#187;</a></p>
</div></td>

<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://dunghennessy.blogspot.com/search/label/NÂNG CAO?&amp;max-results=8">Thủ thuật nâng cao</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.dunghennessy.blogspot.com/feeds/posts/default/-/NÂNG CAO?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="http://dunghennessy.blogspot.com/search/label/NÂNG CAO"> Thủ thuật nâng cao &#187;</a></p>
</div></td>
</tr>

<tr>
<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://dunghennessy.blogspot.com/search/label/CƠ BẢN?&amp;max-results=8">Thủ thuật cơ bản</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.dunghennessy.blogspot.com/feeds/posts/default/-/CƠ BẢN?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="http://dunghennessy.blogspot.com/search/label/CƠ BẢN"> Thủ thuật cơ bản &#187;</a></p>
</div></td>

<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://dunghennessy.blogspot.com/search/label/MENU?&amp;max-results=8">Các mẫu menu ngang-dọc</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.dunghennessy.blogspot.com/feeds/posts/default/-/MENU?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="http://dunghennessy.blogspot.com/search/label/MENU"> Các mẫu menu &#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 màu đen.

* 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="địa chỉ nhãn?&amp;max-results=8">Tiêu đề nhãn</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.dunghennessy.blogspot.com/feeds/posts/default/-/TÊN NHÃN?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="dịa chỉ nhãn"> Tên hiển thị &#187;</a></p>
</div></td>


<td>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="địa chỉ nhãn?&amp;max-results=8">Tiêu đề nhãn</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.dunghennessy.blogspot.com/feeds/posts/default/-/TÊN NHÃN?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="địa chỉ nhãn"> Tên hiển thị &#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:


* Ẩn bài viết ở trang chủ: Xem TẠI ĐÂY.
* Ẩn tiện ích này ở trang bài viết: Xem TẠI ĐÂY.
ànhcông

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