• 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

Tiện ích Bài viết mới nhất có ảnh đại diện bản full

9
19/01/2011

Tôi đã tạo một số kiểu tiện ích Bài viết mới nhất có ảnh đại diện. Bạn có thể dùng từ khóa Recent Posts tìm trên công cụ tìm kiếm của blog để lựa chọn tiện ích phù hợp cho blog của mình. Từ kiểu tiện ích Bài viết mới có ảnh đại diện bố trí cho các nhãn nằm ngang, tôi có điều chỉnh một vài điểm về code để cho ra lò tiện ích Bài viết mới nhất có ảnh đại diện phiên bản hoàn chỉnh (Recent Posts with Thumbnails Full Version by Huynh Nhat Ha). Phiên bản này hiển thị những bài viết mới nhất có ảnh đại diện, tiêu đề bài viết cùng với phần tóm tắt (snippet) bài viết.

Tiện ích này có thể áp dụng cho toàn bộ blog cũng như cho riêng bất kỳ một nhãn nào đó. Bạn có thể xem Demo dưới đây.


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



Để cài đặt tiện ích, bạn hãy thực hiện như sau. Đăng nhập Blogger, vào Design >> Page Elements. Thêm một tiện ích HTML/JavaScript và đặt toàn bộ phần code dưới đây vào phần nội dung của tiện ích.

<style type="text/css">
#rcposts_full {}
.rcposts_hafull {float: left;font-size: 11px;height: 390px;margin: 0 10px;overflow: hidden;padding: 10px;width: 250px;}
.rcposts_hafull 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_hafull a.haclass {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>

<script type="text/javascript">
// Recent Posts with Thumbnails Full Version by Huynh Nhat Ha
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+'';
}

function showrecentpostsfull(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="haclass" href="' + posturl + '">' + removeHtmlTag(posttitle,summaryTitle) + '…</a><br/>';
trtd += removeHtmlTag(postcontent,summaryPost);
trtd += ' ...<div class="bottomline"></div>';
outputinner += trtd;
j++;
}
output += '<div class="rcposts_hafull">';
output += outputinner;
output += '</div>';
document.write(output);
}
</script>

<script type="text/javascript">
imgr = new Array();
imgr[0] = "http://img524.imageshack.us/img524/6449/noimageb.png";
showRandomImg = true;
summaryPost = 50;
summaryTitle = 30;
numposts = 5; // Số bài viết hiển thị
</script>

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

Trong đoạn code CSS chú ý tham số width: 250px;, điều chỉnh chiêu rộng phù hợp với chiều rộng phần sidebar là nơi thường đặt tiện ích này. Bạn có thể điều chỉnh số bài viết hiển thị (numposts = 5) và thay huynh-nhat-ha bằng tên blogspot của bạn. Lưu tiện ích là OK.

Nếu bạn muốn áp dụng tiện ích này cho một nhãn nào đó thì thay đoạn code được đánh dấu màu đỏ ở trên bằng đoạn code sau (và thay Tên nhãn bằng nhãn mà bạn muốn áp dụng tiện ích).

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn?
orderby=published&alt=json-in-script&callback=showrecentpostsfull">
</script>

Xin chúc mừng, bạn là khách có lời bình số 9 may mắn. Bạn đã nhận được lời chúc phúc chân thành từ tác giả bài viết

{9 bình luậnAdd yours ?}

10:34:00, 19 thg 1, 2011

- Thủ thuật hay, không cần file .JS đỡ phải load, cảm ơn nhiều nha. Chúc bạn phát triển.

Reply
17:14:00, 31 thg 1, 2011

Quá tuyệt nhưng mình muốn hỏi khi mình chèn cái này ở 2 nhãn khác nhau vào 2 mục của Tab như(Tạo menu dạng tab với SimpleTabs ) thì nó lại hiển thị cả 2 nhãn trên 1 tab mà không hiển thị ở tab thứ 2. vậy làm cách nào cho thủ thuật này hiển thị 2 nhãn ở 2 tab được ạ. mong sự giúp đỡ của bạn

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

Cho minh hoi cai nay. Tai sao khi da thay ten huynh-nhat-ha thanh ten blog minh thi no khong hien len gi ca!

Reply
17:24:00, 8 thg 6, 2011

anh ơi sao thay tên blog rồi mà ko thấy hiện gì cả

Reply
16:36:00, 26 thg 7, 2011

thank a nha!! nó ko hiện tại số bài viết của b chưa đủ số bài b muốn hiển thị hay sao ý, chỉnh số bài muốn hiển thị nhỏ hơn số bài viết coi sao.

Reply
10:44:00, 3 thg 8, 2011

Hi Hà,
Cái này mình xét nếu tiêu đề dài hơn độ rộng thì mới cắt chữ đi. Cái tiêu đề có 2 chữ ah, mà bị cắt mất tiêu. Theo mình tiêu để ngắn thì cứ cho hiện ra hết, còn tiêu đề dài quá thì cắt cho vừa với độ rộng, như vậy sẽ đẹp hơn.

Thanks for support. :53)

Reply
13:56:00, 18 thg 11, 2011

Anh Hà ơi cái này mình muốn hiện đầy đủ Tiêu đề thì thay đổi chỗ nào anh.
http://blog.vnsupercar.net/p/sitemap_17.html

Reply
20:38:00, 10 thg 1, 2012

alo giup minh voi lam sao chinh le cho cai tien ich nay no hop voi module vay

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