Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị một bài mới nhất ở phía trên, bên cạnh là vài dòng giới thiệu đầu (bạn có thể cho hiển thị một hay nhiều bài có hình cũng được), các bài viết còn lại sẽ hiển thị phía dưới dạng List (chỉ có các tiêu đề). Khi bạn bấm vào dòng tiêu đề đầu tiên có màu nền xanh (thủ thuật Windows 7) thì sẽ xem hết các bài trong nhãn...
Mời các bạn xem thử hình phía dưới sẽ thấy rõ hơn.
Hiển thị một bài mới nhất có hình phía trên, các bài còn lại hiển thị dạng List |
Hiển thị 2 bài mới nhất có hình phía trên, các bài còn lại hiển thị dạng List |
Đầu tiên bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML, và dán tất cả các code phía dưới vào.
<style type="text/css">
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;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/AVvXsEhpFMaYxpXAQNShmhTGBw65u0-Vy5FM_KqIydGd8dXU4L_J5l9JQ9t3cpUxnTqlNJ03mOb_AWOvu-eh32D-DmRWfjHowK0rN-w9quvswOZAY_A15Nsg5ZT8xL_ZpUpUh3rOxGLZ80FXobOv/) 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://www.dungheineken.blogspot.com/search/label/WIN 7">Thủ thuật Windows7</a></h2>
<script type='text/javascript'>
numposts = 5; 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;padding:5px 0 10px">' + 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="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.dungheineken.blogspot.com/feeds/posts/default/-/WIN 7?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;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/AVvXsEhpFMaYxpXAQNShmhTGBw65u0-Vy5FM_KqIydGd8dXU4L_J5l9JQ9t3cpUxnTqlNJ03mOb_AWOvu-eh32D-DmRWfjHowK0rN-w9quvswOZAY_A15Nsg5ZT8xL_ZpUpUh3rOxGLZ80FXobOv/) 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://www.dungheineken.blogspot.com/search/label/WIN 7">Thủ thuật Windows7</a></h2>
<script type='text/javascript'>
numposts = 5; 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;padding:5px 0 10px">' + 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="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.dungheineken.blogspot.com/feeds/posts/default/-/WIN 7?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>
Bây giờ, bạn thay đổi các đường link màu đỏ (http://www.dungheineken.blogspot.com/feeds/posts/default/-/WIN 7) là địa chỉ nhãn mà bạn muốn hiển thị, thay đổi các số màu xanh theo ý muốn của bạn:
* Numposts (Số bài hiển thị kể cả có hình hoặc không có hình).
* List1 (Số bài hiển thị có hình)
* SumPots (Số chữ giới thiệu ở bài có hình)
* Width (độ rộng của khung tiện ích)
và bấm LƯU lại là xong
LƯU Ý: Các bạn phải điền thật chính xác địa chỉ nhãn của bạn ở các dòng màu đỏ, nếu không nó sẽ bị lỗi và không hiển thị được.
Chúc các bạn thành công
Nguồn: Itech Plus
34 nhận xét:
sao em làm giống như thế nó bị lỗi
Bị lỗi như thế nào? Có phải ra một khung trắng không? Nếu vậy là do em chép địa chỉ nhãn không chính xác, làm lại thử xem!!!
Anh ơi sao em không thấy cái nào là cái thêm tiện ích html cả.
Nếu đang sử dụng giao diện tải trên mạng, thì em đăng nhập vào Blog, chọn Bố cục sẽ có phần thêm tiện ích HTML...
Làm thế nào để có được đường link nay : (http://www.dungheineken.blogspot.com/feeds/posts/default/-/WIN 7) bạn oi. Xin bạn chỉ dùm. Cám on nhiều
Đây là đường link của nhãn Win 7 ở Blog dungheineken, nếu bạn muốn thì bạn chỉ việc thay địa chỉ blog và tên nhãn của bạn vào đường link đó mà thôi, ví dụ: http://www.giaosusongngoc.blogspot.com/feeds/posts/default/-/tên nhãn của bạn
Tên nhãn trong khung to quá , muốn sữa cho nó nhỏ lại thì phải làm sao vậy ? thks
Bạn giảm số 10px nhỏ lại (kế chữ font-weight)
Hi bạn ơi,bài viết của mình có ảnh nhưng sao nó không lấy ảnh được vậy ah? chắc code không có chế độ tự động lấy ảnh hả bạn?
Ảnh của bạn phải nằm ở đầu bài viết thì mới được, nếu ảnh nằm ở giữa hoặc cuối bài viết thì không được bạn à...
Bài viết mình đều làm thế nhưng vẫn không hiện ảnh đại diện bạn ơ. Sao mình chỉnh lại font chữ theo bạn hướng dẫn mà nó vẫn không thay đổi vậy ah?
Bạn gởi mình tên đăng nhập và pass của blog bạn, mình sẽ chỉnh lại cho
Bạn check mail nhé. Minh đã gửi qua mail rồi đó bạn. Thanks bạn nhiều
Ban oi , dan doan code vao blog va thay doi nhu ban noi nhung no chi hien thi thanh mau xanh ngang, ban giup minh voi
newstodayblogger.blogspot.com
o phan footer do ban
thank you
Tôi có vào blog của bạn và thấy nó hiển thị các bài đăng mới trên blog của bạn mà...
cam on ban nhieu nhe,
voi cho minh hoi la khi minh copy code qua blog khac (newscarspro.blogspot.com, minh co 2 blog) no ko noi hinh len nhung khi click vao label no len link search ESS feed , trong blog cu (newstodayblogger.blogspot.com)no co hinh nhung click len label no ko search RSS Feed, ban chi minh lam cho no vua co RSS Feed vua co hinh voi, thank you
À, vấn đề này mình không "rành" cho lắm, theo mình nghĩ chắc do ảnh hưởng của theme blog mà bạn đang sử dụng đó...Bạn thử lên Google search tìm kiếm hướng khắc phục xem sao.
Xin lỗi vì không giúp gì cho bạn
ANH DŨNG CHO MÌNH HỎI.
THỦ THUẬT TRÊN ÁP DỤNG BLOG NÀO CŨNG ĐƯỢC HAY SAO
BLOG MÌNH DOWNLOAD TREN MẠNG VỀ ÁP DỤNG KHÔNG HIỂN THỊ ĐUOC
1 BLOG KHÁC CỦA MÌNH THÌ HIỂN THỊ DC
gIÚP MÌNH VỚI
Cái này đều áp dụng cho tất cả các theme...Không hiển thị được là do địa chỉ blog của bạn chưa điền chính xác đó, bạn làm lại thử xem
cái này sao màu sắc không chỉnh được anh D ơi
Mình muốn chỉnh màu nền màu chữ lại mà k dc
Em thử đổi các màu ở dòng lệnh background hoặc color thử xem...
mình làm theo nhưng nó ko mất khi vào bài viết @@" làm sao để ẩn đi khi vào bài viết ?
Là sao??? Mình chưa hiểu ý bạn lắm...
là vào bài viết thì ko mắt label đi .. nó cứ hiện miết , mình mún khi vào bài viết no mất ....
vì mình làm nhìu label ở trang chủ, có gì bân pmm yahoo: yh_ga chỉ mình vs :D
Vậy bạn phải làm ẩn tiện ích này ở các trang bài viết, bạn tham khảo bài này:
* ẨN TIỆN ÍCH HTML
nhãn mình tạo làm sao Anh nhỉ? em có vài bài đăng và cũng muốn làm hiển thị bài viết trong nhãn.
chúc Anh luôn vui!!!
Muốn làm các tiện ích hiển thị bài viết trong nhãn thì trước tiên em phải tạo nhãn cho các bài viết trước, sau đó mới làm tiện ích này, Để tạo nhãn cho bài viết, em tham khảo bài này nha:
http://dunghennessy.blogspot.com/2011/03/tao-nhan-chu-e-cho-cac-bai-viet.html
Chúc em thành công
chào anh Dũng anh cho em hỏi là mình muốn tạo nhãn bài viết xem nhiều vaf bài đăng mới nhất như thế nào ạ
Trước tiên thì phải tạo nhãn là: BÀI XEM NHIỀU, sau đó mới áp dụng các thủ thuật về hiển thị các bài viết theo hướng dẫn như trên.
Theo yêu cầu của em, thì em phải làm cùng lúc 2 thủ thuật hiển thị nhãn đó là:
1/ BÀI XEM NHIỀU
2/ BÀI ĐĂNG MỚI
Chúc em thành công
anh có thể chinh giup em css cho no hop vói blog cua em được không ah . Bog của em là http://bloganhdu1.blogspot.com/ .rất mong anh giúp cho
Em muốn chỉnh về cái gì??? Font chữ, màu chữ, background???
Muốn chỉnh em cứ việc đăng nhập vào blog, chọn chỉnh sửa mã nguồn HTML, sau đó kiếm các dòng lệnh liên quan đến "nó" và chỉnh lại, sau cùng bấm Lưu là xong
Chúc em thành công
ý của em là em muon chỉnh màu nền cái nhãn mẫu của anh thành màu đỏ cho no hopvoi blog của em ạh
em chinh đươc css rồi anh ajh . Nhưng khi em đăng 2 bài viết thì blog của em lại bị lỗi anh giai thích giùm em được không ạh .blogcua em đay blogphatgiao.blogspot.com
Em chỉnh CSS như thế nào mà "nó" bị lỗi như vậy???
Đăng nhận xét