Được đăng bởi :
Minh
|
Thứ Tư, 19 tháng 1, 2011
|
08:39:00
Tiện ích Bài viết mới nhất có ảnh đại diện bản full
<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>
#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>
";
/* */
orderby=published&alt=json-in-script&callback=showrecentpostsfull">
</script>
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.
Để 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.
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).
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
<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>
#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>
orderby=published&alt=json-in-script&callback=showrecentpostsfull">
</script>
Bạn đã xem chưa
- Cài đặt bộ chèn Emoticons cho hệ thống nhận xét phân cấp
- Tạo trang homepage riêng cho trang nhãn nhất định
- Tạo Next Post và Previous Post theo phong cách Wordpress
- Tiện ích Bài đăng phổ biến bố trí chiều ngang
- Tiện ích Bài viết mới nhất dành cho đối tác VIP
- Thủ thuật yêu cầu: Script liệt kê và gọi script
- Theo dõi bài viết mới nhất từ blog khác
- Tạo thanh điều hướng bài viết chuẩn cho blogspot
- Tiện ích Nhận xét mới nhất không dùng Javascript
- Bài viết mới nhất cho nhãn không dùng Javascript
- Ẩn nội dung nhận xét của người nhận xét không URL
- Bài viết mới nhất có ảnh đại diện cho từng nhãn
- Tiện ích Bài viết Hot cho blogspot
- Tùy biến Bài viết mới nhất có ảnh đại diện không dùng Javascript
- Bài viết mới nhất có ảnh đại diện cho nhiều nhãn nằm ngang
- Tiện ích Bài viết mới nhất có ảnh đại diện
- Tiện ích Bài viết mới nhất có ảnh đại diện đặt cuối bài viết
- Tiện ích Bài viết liên quan ngẫu nhiên có ảnh đại diện
- Đưa biểu tượng cảm xúc vào bài viết và nhận xét Blogger
- Tiện ích Bài viết mới nhất chạy marquee
- Tiện ích Nhận xét mới nhất có ảnh đại diện
- Tiện ích Bài viết mới nhất dành cho đối tác VIP
- Theo dõi bài viết mới nhất từ blog khác
- Bài viết mới nhất cho nhãn không dùng Javascript
- Bài viết mới nhất có ảnh đại diện cho từng nhãn
- Tiện ích Phim mới nhất cho blogspot về phim
- Tiện ích Recent Posts Today và Recent Posts Yesterday
- Hiển thị bài viết mới nhất chạy marquee chiều ngang
- Tùy biến Bài viết mới nhất có ảnh đại diện không dùng Javascript
- Tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript
- Bài viết mới nhất có ảnh đại diện sử dụng Blog List
- Tiện ích Bài viết mới nhất với hiệu ứng accordion
- Bài viết mới nhất có ảnh đại diện cho nhiều nhãn nằm ngang
- Tiện ích Bài viết mới nhất có ảnh đại diện
- Tiện ích Bài viết mới nhất có ảnh đại diện đặt cuối bài viết
0 nhận xét | Viết lời bình