• 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 nhiều nhãn nằm ngang

11
28/12/2010

Bất kỳ blogger nào làm quen với blogspot một thời gian hẳn biết qua tiện ích Bài viết mới nhất có ảnh đại diện khá phổ biến và cần thiết cho bất kỳ một blogspot nào. Tôi cũng đã tạo một số code tùy biến cho tiện ích này với những đặc trưng khác biệt. Thông thường tiện ích Bài viết mới nhất có ảnh đại diện chỉ dành cho toàn bộ bài viết trên blog hoặc chỉ dành cho 1 nhãn nào đó mà thôi. Tôi từng có ý tưởng bố trí tiện ích này gồm nhiều cột theo chiều ngang ở bài viết này.

Tôi tiếp tục nảy ra ý tưởng bố trí tiện ích này cho nhiều nhãn khác nhau xếp theo chiều nằm ngang (Recent posts with Thumbnails for Horizontal Labels), ý tưởng mà bạn chưa từng thấy trong cộng đồng Blogger. :44)

Bạn có thể xem Demo dưới đây.




Tiện ích này thích hợp khi đặt ở cuối bài viết hoặc ở trên phần Footer của Template.
Để làm được điều này, bạn hãy thực hiện theo các bước sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

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

<script type="text/javascript">
// Recent Posts with Thumbnails for Horizontal Labels Widget by Huynh Nhat Ha
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;
summaryPost = 60;
summaryTitle = 34;
numposts = 5;
var getlabels = 0;
labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");
function removeHtmlTagLabels(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+'';
}

function showrecentpostslabels(json) {
var output = "";
var outputinner= "";
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
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) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) { var postcontent = entry.summary.$t; }
else var postcontent = "";
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent;
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 trtd = "";
trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagLabels(posttitle,summaryTitle) + '…</a><br/>';
trtd += removeHtmlTagLabels(postcontent,summaryPost);
trtd += ' ...<div class="bottomline"></div>';
outputinner += trtd;
j++;
}
output += '<div class="rcposts_horizontal">';
output += '<h3>' + labeltitle[getlabels] + '</h3>';
output += outputinner;
output += '</div>';
document.write(output);
getlabels ++;
}
</script>

<style>
#rcposts_label {}
.rcposts_horizontal {float: left;font-size: 11px;height: 390px;margin: 0 10px;overflow: hidden;padding: 10px;width: 250px;}
.rcposts_horizontal h3 {background-color: #555;border-bottom: 1px solid #888;color: #BBB;font-family: Arial;font-size: 13px;font-weight: bold;margin: 0 0 10px;padding: 5px 0;text-align: center;text-case: sentence;}
.rcposts_horizontal img {background-color: #555;float: left;height: 50px;margin: 0 8px 0 0;padding: 2px;width: 50px;}
.bottomline {border-bottom: 1px dotted #555;clear: both;margin-bottom: 5px;padding: 0 0 5px;}
.rcposts_horizontal a.tlabel { font-family: Arial !important; font-size: 11px !important; font-weight: normal !important;display: block;float: left;max-width: 205px;overflow: hidden;white-space: pre;}
</style>

Lưu Template.

Trong đoạn code trên bạn cần thay đổi tên nhãn (ví dụ: Thủ thuật Blog, Thủ thuật Blogger, …) tại các dòng

labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");

Bạn có thể thay đổi số bài viết hiển thị ở dòng numposts = 5.

Tiện ích này mặc định hiển thị cho 2 nhãn với bề rộng không gian hiển thị tiện ích tốt nhất là 600px, bạn cần điều chỉnh tham số width: 250px cho phù hợp với vùng không gian mà bạn muốn hiển thị tiện ích. Nếu muốn thêm nhãn thì điều chỉnh ở 2 dòng js ở trên.

Bước 2. Đặt đoạn code dưới đây vào một tiện ích HTML/JavaScript tại nơi muốn hiển thị tiện ích Bài viết mới nhất có ảnh đại diện.

<div id="rcposts_label">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>

Nếu bạn muốn đặt tiện ích ở cuối bài viết thì khi chỉnh sửa Template, chọn Mở rộng mẫu tiện ích (Expand Widget Templates) và đặt đoạn code dưới đây vào sau dòng <div class='post-footer'> hoặc vào trước dòng <div class='post-footer-line post-footer-line-1'> hoặc dòng <div class='post-footer-line post-footer-line-3'> hoặc dòng <div class='post-footer-line post-footer-line-3'>.

<div id="rcposts_label">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>

Bạn cần thay huynh-nhat-ha thành tên blogspot của bạn và thay tên nhãn tương ứng với phần javascript ở Bước 1.

Chú ý: Nếu bạn đặt tiện ích này vào một tiện ích HTML/JavaScript thì bạn có thể đặt chung code ở Bước 1 vào trước code ở Bước 2 để dễ quản lý. Nếu bạn đặt code ở Bước 1 vào trước thẻ </head> mà gặp lỗi trong Template thì bạn đặt toàn bộ phần code giữa 2 thẻ <script type="text/javascript">, </script> (ở Bước 1) vào Notepad rồi lưu file với tên rcplabel.js, sau đó upload lên host rồi đặt code theo kiểu như sau vào trước thẻ </head> trong Template.

<script src="http://diachiwebhost.com/rcplabel.js" type="text/javascript"></script>

{11 bình luậnAdd yours ?}

aathuat.com
11:25:00, 28 thg 12, 2010

Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
Thông báo lỗi XML: The content of elements must consist of well-formed character data or markup.

<<< vay la sao ah ^^

Reply
13:08:00, 28 thg 12, 2010

À, nếu code ở bước 2 mà bạn đưa vào Template thì bạn phải mã hóa trước khi đưa vào thì mới được. Bạn chỉ cần thay các dấu & thành & trong đoạn code ở Bước 2.

Reply
11:11:00, 17 thg 1, 2011

Sai đoạn code ở bước 1.

Reply
11:25:00, 17 thg 1, 2011

@N.T.L Đã có demo trên blog tớ rồi, sai sao được cậu

Reply
22:16:00, 18 thg 1, 2011

ban oi lam sao de tien ich nay hien thi cho toan bo cac nhan ha ban.tai vi blog cua to co qua nhieu nhan .ko the ap dung tien ich nay duoc neu chi tao duoc vai nhan nhu vay
ban co the thong qua yahoo chi to duoc khong :
yahoo to la : chantinh031188

Reply
22:29:00, 18 thg 1, 2011

@poormewhy Mình tạo tiện ích này chỉ dùng cho nhiều nhãn nằm ngang thôi bạn à, nếu chỉ dùng cho toàn bộ blog thì bạn phải dùng tiện ích khác, theo bài này hoặc bài này. ~x(

Reply
22:47:00, 18 thg 1, 2011

Tuy nhiên nếu bạn thích tiện ích Bài viết mới nhất cho cả blog với phong cách giống tiện ích ở trên thì tôi sẽ viết lại code từ tiện ích này để tạo một tiện ích mới. Bạn hãy chờ nhé, tôi sẽ giành thời gian sớm nhất.

Reply
16:14:00, 2 thg 6, 2011

@Huỳnh Nhật Hà

vậy thì hay quá thank bạn trước nha :)

Reply
12:25:00, 9 thg 11, 2011

code đoạn 1 bị lỗi, chắc là bạn cop sai bạn kiểm tra dùm cái

Reply
15:58:00, 27 thg 5, 2012

Ủa sao mình làm mà nó hiện no image hết 1 loạt là sao nhỉ

Reply
22:03:00, 14 thg 10, 2014

NÓ CHỈ HIỆN 1 NHÃN (1 CỘT), KO THẤY HIỆN CẢ 2 CỘT THÌ SỬA THẾ NÀO B?

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