Diễm Xưa Blog: Tips

Showing posts with label Tips. Show all posts

Nov 30, 2012

Ẩn bài viết ở trang chủ

Trang chủ là nơi thể hiện các bài đăng của bạn được xếp theo thứ tự thời gian, bài nào đăng cuối cùng sẽ hiển thị trên cùng. Các bạn sẽ tự hỏi: "Ẩn bài viết ở trang chủ để làm gì?".

Với lý do nào đó, bạn muốn ẩn bài viết ở trang chủ để gắn các tiện ích khác đẹp hơn và hữu dụng hơn tạo cho trang Blog của mình có giao diện lạ mắt và khác biệt so với các blog khác thể hiện phong cách của chính mình...( theo cách diễn giải của mình là cất hết những bài viết đang có sẵn của mình để trang trí sắp xếp theo ý mình như Mul chẳng hạn, Dĩ nhiên các bài của bạn phải đuwocj xếp theo Label(nhãn) cho từng loại rồi nhé VD: Notes, Blog, Photos, video…)

· Đầu tiên, bạn đăng nhập vào blog > chọn thiết kế > chọn chỉnh sửa HTML( không mở rông mẫu tiện ích nhé).

· kế tiếp bạn bấm cặp phím Ctrl+F để mở hộp tìm kiếm, sau đó gõ vào hộp tìm kiếm dòng lệnh ]]>

· Sau đó bạn copy đoạn code dưới đây và dán phía dưới dòng lệnh ]]>

và bấm Lưu mẫu

· Bạn quay về trang chủ của blog sẽ thấy các bài đăng đã được ẩn đi, bây giờ các bạn có thể thêm các tiện ích nào mà bạn muốn..

Lưu ý: Các bạn phải kéo một tiện ích nào đó để làm "mồi" lên trên khung bài đăng trước khi thực hiện thủ thuật này, vì khi ẩn bài viết thì trong Thiết kế bạn sẽ không thấy khung bài đăng do vậy bạn sẽ không kéo tiện ích lên trên Bài đăng được.

Nguồn: dunghennessy.blogspot.com

Nov 29, 2012

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

Nov 28, 2012

Đặt code trong khung trên bài viết blogger

Nguồn: bongnguoilangle.blogspot.com

Đây là một trong những thủ thật cơ bản mà các trang thủ thuật khác ở việt nam đều đã có đăng, tuy nhiên ở blog của mình thì chưa có bài hướng dẫn thủ thuật này. Nhân đây có người hỏi về thủ thuật này, mình cũng xin post lại.

Ở bài viết mình sẽ nói về 2 vấn đề : 1 là làm thế nào để chèn code vào bài viết, thứ 2 là trang trí cho khung hiển thị.

A. Chèn code vào bài viết:
- Như chúng ta đã biết, khung sọan thảo của blogspot cho phép hiển thị hầu hết code HTML, vì thế khi bạn chèn code vào bài viết thì code đó cũng sẽ được hiển thị.
- Để có thể hiển thị được chúng ngòai layout, bạn phải chuyển 1 vài kí tự đặc biệt trong mã code HTML thành các kí tự khác.
- Về cơ bản, ta chỉ cần thay đổi 2 kí tự đặc biệt là < và > , xem bên dưới:

* Ký tự < sẽ chuyển thành <
* Ký tự > sẽ chuyển thành >

Đó là cách thực hiện bằng tay khi code của bạn chỉ có vài dòng, nhưng đối với những đọan code dài thì sao, ta không thể ngồi đó mày thay thế tất cả chúng, rất tốn thời gian.

Để khắc phục điều này, đã có website cho phép bạn chuyển đổi tất cả các kí tự đặc biệt của mã HTML 1 cách nhanh chóng.

Các bạn vào địa chỉ này : http://blogcrowds.com/resources/parse_html.php, giao diện sẽ như bên dưới

Dán code mà bạn cần chuyển đổi vào khung rồi nhấn Parse sau đó ta sẽ được code đã được mã hóa ở khung 1, nếu muốn mã hóa tiếp code khác, bạn chèn code vào khung thứ 2 (lưu ý: fải là khung thứ 2) (xem hình minh họa)

B. Trang trí cho khung hiển thị code :

- Để làm điều này, bạn chỉ cần tạo 1 class riêng cho code, ví dụ ta sẽ tạo class "codeview" và đặt code vào trong thẻ div, như bên dưới:

- Tất nhiên để làm được bạn phải chèn code CSS của class "codeview" vào trong code của template. Các bạn vào bố cục » vào chỉnh sửa code HTML » và chèn code của các style bên dưới lên trên dòng code]]></b:skin>

- Sau đây mình sẽ giới thiệu các kiểu khác nhau cho các bạn:

1. Style 1:

Code CSS:

.codeviews {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3415/3555944482_d0433d99fe_o.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
Hình minh họa

2. Style 2:

Code CSS:

.codeviews {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 20px solid #CECECE;
}

Hình minh họa:

3. Style 3:

Code CSS:

.codeviews {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3575/3555191103_7ce001f502_o.gif) no-repeat right top;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

Hình minh họa:

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

Bổ sung thêm 2 địa chỉ Convert Code:

http://centricle.com/tools/html-entities/

http://www.eblogtemplates.com/blogger-ad-code-converter/

Nguồn: FanDung's blog
Edited: Bóng Người Lặng Lẽ

Cách khác: đây là cách mà Bóng Người Lặng Lẽ's Blog đang sử dụng

Giới thiệu: Thủ thuật hỗ trợ chèn code vào bài viết trên blog và chèn code vào comment. Ngoài ra bạn còn có thể trang trí cho khung chứa code của blog mình theo ý thích, sao cho phù hợp với blog nhất.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)

2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sửa HTML)

3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm dòng ]]></b:skin>

- Thêm vào trước nó đoạn code sau:

/*chèn code vào bài viết*/
pre {
    color:#343434;
    font-family: Tahoma;
    font-size:12px;
    max-height:300px; /*chiều cao tối đa của khung*/
    line-height:17px;
    background: #FFF2C4;  /*Màu nền khung chứa code*/
    display: block; 
    padding: 4px 4px 4px 4px; 
    border: 1px #A0C4EA dashed; /*Viền khung*/
    overflow:auto;
    word-wrap:break-word;
}

Bước 2: Save template. (Lưu mẫu)

Bước 3: Sử dụng code cho bài viết. Viết bài, tới chỗ muốn chèn code thì chuyển sang HTML rồi chèn nội dung như sau:

<pre>Nội dung đoạn code đã mã hóa </pre>

Các bạn nhớ là phải mã hóa code trước rồi mới dùng được nhé!

( Những đoạn Code ngắn không cần phải cho trong khung <pre>Nội dung đoạn code đã mã hóa </pre> mà chỉ mã hóa là xong, vì cho đoạn code đã mã hóa vào khung trên mục đích là đóng khung đoạn code cho đẹp)

Diễm Xưa Blog

Nov 30, 2012

Ẩn bài viết ở trang chủ

Nov 29, 2012

chia ô theo Label ở trang chủ

Nov 28, 2012

Đặt code trong khung trên bài viết blogger

Blog

blog

Note

Tips

My favorite links

My friends