• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Bài viết mới nhất có ảnh đại diện cho từng nhãn

20
18/03/2011

Trên blog này, bạn có thể tìm thấy nhiều kiểu tiện ích Bài viết mới nhất cho blogspot của mình bằng cách tìm đến nhãn Recent Posts. Và có lẽ đây là nơi mà bạn có thể tùy ý lựa chọn cho mình một kiểu tiện ích phù hợp cho blog của mình ở thể loại này.

Hôm nay xin giới thiệu với quý bạn đọc thêm một kiểu tiện ích cùng loại nhưng với tính năng khác biệt là tạo ảnh đại diện cho từng nhãn riêng biệt, theo đó nếu bài viết có ảnh thì script sẽ lấy ảnh đó làm ảnh đại diện, nếu bài viết không có ảnh thì script sẽ lấy ảnh mặc định (no-image) làm ảnh đại diện, nếu bài viết thuộc nhãn được gán ảnh đại diện riêng cho nhãn đó thì script sẽ lấy ảnh gán đó làm ảnh đại diện. Tôi gọi tiện ích này là Bài viết mới nhất có ảnh đại diện cho từng nhãn (Recent Posts with Thumbnails per Label Widget).

Ở đây bạn cần tạo ảnh riêng cho từng nhãn hoặc một số nhãn ưu tiên nào đó rồi upload lên host (hoặc lên chính Blogger) rồi lấy URL để cài đặt trong script của tiện ích.

Trước khi cài đặt bạn có thể xem Demo bên dưới.


Bài viết mới nhất



Để cài đặt tiện ích, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước dòng ]]</b:skin>.

#rcp {margin: 0 auto;width: 245px;}
.rcposts {background-color: transparent;border: 1px solid #101921;height: 90px;margin: 5px 0;outline: 1px solid #404951;padding: 0;position: relative;width: 241px;}
.rcposts:hover {-moz-box-shadow: 0px 0px 60px #505961 inset;}
.rcposts img {height: 55px;left: 5px;position: absolute;top: 30px;width: 55px;}
.rcposts h6 {background-color: #404951;height: 20px;left: 5px;margin: 0;position: absolute;text-align: center;top: 6px;width: 230px;overflow: hidden;word-wrap: break-word;}
.rcposts h6 a {color: #ffffff;font-family: Tahoma;font-size: 11px !important;font-weight: normal !important;line-height: 20px;}
.rcposts p {font-size: 11px;height: 48px;left: 70px;line-height: 1.1;margin: 0;overflow: hidden;position: absolute;top: 35px;width: 160px;}

Trong đoạn code CSS ở trên, cần chú ý điều chỉnh tham số width:245px sao cho tương thích với chiều rộng của vị trí đặt tiện ích (thường là sidebar hoặc lowerbar).

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
// Recent Post with Thumbnails per Label Widget by www.huynh-nhat-ha.blogspot.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}
// Establish specific image per label
function getimage(cat) {
theimg = "http://goo.gl/lB0mM";
if(cat=="Tên nhãn 1"){theimg = "URL_nhãn 1"}
if(cat=="Tên nhãn 2"){theimg = "URL_nhãn 2"}
if(cat=="Tên nhãn 3"){theimg = "URL_nhãn 3"}
if(cat=="Tên nhãn 4"){theimg = "URL_nhãn 4"}
if(cat=="Tên nhãn 5"){theimg = "URL_nhãn 5"}
if(cat=="Tên nhãn 6"){theimg = "URL_nhãn 6"}
if(cat=="Tên nhãn 7"){theimg = "URL_nhãn 7"}

return theimg;
}
function recentpoststhumbperlabel(json) {
var entry, posttitle,posturl,postimg,postcontent;
var output = "";
for (var i = 0; i < json.feed.link.length; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
var cat = entry.category[0].term;
postimg = getimage(cat);
}
output += "<div class='rcposts'>";
output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
output += "<p>" + removeHtmlTag(postcontent,100) + " ...</p>";
output += "</div>";
}
document.getElementById("rcp").innerHTML = output;
}

//]]>
</script>

Trong đoạn code trên bạn cần thay lần lượt các tên nhãn tương ứng với URL của từng nhãn, bạn có thể thêm bao nhiêu nhãn cũng được theo đúng cấu trúc như trên, không phân biệt nhãn tiếng Anh hay tiếng Việt gì cả, ví dụ: Thủ thuật Blogger, CSS, HTML, Thiết kế web, Tin nóng, …

Lưu Template.

Bước 3. Vào Page Elements. Thêm một tiện ích HTML/Javascrip và đặt đoạn code dưới đây vào phần Nội dung tiện ích.

<div id="rcp"></div>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=recentpoststhumbperlabel"></script>
<div style="clear:both;"></div>

Thay huynh-nhat-ha bằng tên blogspot của bạn. Điều chỉnh tham số max-results=5 để hiển thị số bài viết bạn muốn cho tiện ích.

Đơn giản hơn, bạn có thể gộp code ở các bước rồi đặt vào một tiện ích HTML/Javascript theo Bước 3, như sau:

<style type='text/css'>
Đặt code CSS ở Bước 1 tại đây
</style>

<script type='text/javascript'>
Đặt code Javascript ở Bước 2 tại đây
</script>

<div id="rcp"></div>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=recentpoststhumbperlabel"></script>
<div style="clear:both;"></div>

Chúc bạn thành công! :47)

{20 bình luậnAdd yours ?}

10:13:00, 18 thg 3, 2011

blog bác dạo này chậm kinh khủng? ăn xong tô mì tôm mới load nổi, bác kiểm tra lại xem

Reply
11:15:00, 18 thg 3, 2011

Do các bài viết bị copy nhiều quá, dùng chung hình ảnh và js nhiều nên chậm dần.
:71)

Reply
11:27:00, 18 thg 3, 2011

:54) thế thì cấm copy ngay thoai

Reply
16:32:00, 18 thg 3, 2011

Mình mới chuyển sang xài cái Auto Readmore không Javascript hy vọng sẽ load nhanh hơn. :74)

Reply
20:29:00, 18 thg 3, 2011

Blogger bị chậm hiện nay là tình trạng chung vì mạng internet cáp quang của VN nối ra quốc tế bị đứt. Có khi phải mất cả tháng để khắc phục...Trang của tớ cũng bị tình trạng chậm như vậy

Reply
21:16:00, 18 thg 3, 2011

Chính xác là do bị đứt cáp. Thêm vụ nữa là VNPT chặn trang blogger.com làm em ko đăng nhập dc phải đổi DNS liên tục. :61). Tiện đây cho em hỏi bác Hà là em post video bằng java sao ko dc nhỉ, chỉ post dc code html, em nhớ hồi xưa hình như post java dc mà. :61)

Reply
21:47:00, 18 thg 3, 2011

Có lẽ do đứt cáp thì phải, thấy nhiều blog than phiền tình trạng này, mình xài 3G của Viettel nên thấy bình thường.
Javascript khi post phải đặt giữa 2 dòng chú thích

//<![CDATA[

//]]>

thì mới được, k thì lỗi. :73)

Reply
23:55:00, 18 thg 3, 2011

em post mà nó báo thế này "HTML của bạn không thể được chấp nhận: Thẻ bị hỏng: ![CDATA["

Reply
09:04:00, 19 thg 3, 2011

Cậu đăng đoạn code đó trong comment để xem thử nào. Dùng công cụ Parse HTML để mã hóa code trước khi đăng nhé.

Reply
11:45:00, 19 thg 3, 2011

Hà ơi , bác làm giúp em cái thủ thuật tạo recents comments giống trang này đi

Reply
15:41:00, 19 thg 3, 2011

//<![CDATA[
<script type='text/javascript'>
var so = new SWFObject('player.swf','ply','470','320','9','#ffffff');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('image','http://content.longtailvideo.com/videos/flvplayer.jpg');
so.addVariable('file','http://content.longtailvideo.com/videos/flvplayer.flv');
so.addVariable('controlbar','over');
so.addVariable('duration','34');
so.addVariable('fullscreen','true');
so.addVariable('stretching','fill');
so.write('mediaspace');
</script>
//]]>

em lấy code ở trang này nè http://www.longtailvideo.com/support/jw-player-setup-wizard?example=11

Reply
19:23:00, 19 thg 3, 2011

@Minh Qu�n Tiện ích Recent Comments kiểu này đã viết rồi mà, tìm ở tag Recent Comments nhé.

Reply
00:54:00, 26 thg 3, 2011

A giúp e cái này: E muốn chia template thành 2 cột như trong hình này thì phải làm thế nào a

http://d.f5.photo.zdn.vn/upload/original/2011/03/26/0/52/13010755401091709066_574_574.jpg

Reply
00:55:00, 26 thg 3, 2011

http://goo.gl/0D2fl

Reply
09:06:00, 26 thg 3, 2011

Cái đó em chia đôi phần #main ra làm 2 phần bằng nhau:

#main-left { Đặt CSS }

#main-right { Đặt CSS}

Reply
18:22:00, 27 thg 3, 2011

Hà có thể chỉ rõ cách chia main thành 2 phần = nhau để thêm tiện ích hem, đặt css thì đặt gì?? Anh thông cảm em hơi gà về mấy cái này :61)

Reply
18:52:00, 27 thg 3, 2011

@L� Truong Vinh Trung Hồi nào rảnh viết bài rõ ràng nhé e.

Reply
18:08:00, 30 thg 6, 2012

có không :J)

Reply
22:05:00, 5 thg 10, 2017

bbbbnbj hbb

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn