Bài viết này, LAMWEB.EDU.VN sẽ hướng dẫn bạn cách để tạo 1 widget hiện tạ bài viết theo nhãn Blogger. Nó sẽ giúp bạn có nhiều ý tưởng hơn để trình bài nội dung ra trang chủ. Khi học làm website bằng Blogger. Mời mọi người cùng tham khảo nhé !
Để tạo widget hiển thị bài viết theo nhãn trong blogger, bạn thực hiện theo 4 bước đơn giản sau:
Hãy sao lưu (backup template) hiện tại của bạn lại trước khi thao tác liên quan tới chỉnh sửa HTML Template trên Blogger nhé !
Bước 1: Thêm Code JS vào Template Blogger
Đăng nhập vào blogger.com -> Chủ đề -> Tuỳ chỉnh HTML và Dán đoạn Code sau vào trước thẻ </head>
<!-- Recent Posts by Label Start -->
< script type = 'text/javascript' >
//<![CDATA[
function labelthumbs(json) {
document.write('<ul class="label_with_thumbs">');
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 == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url;
} catch (error) {
s = entry.content.$t;
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 != "")) {
thumburl = d;
} else thumburl = 'http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "June";
monthnames[7] = "July";
monthnames[8] = "Aug";
monthnames[9] = "Sept";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<li class="clearfix"><div class="thumnail">');
if (showpostthumbnails == true)
document.write('<a href="' + posturl + '" target ="_top"><img class="label_thumb" src="' + thumburl + '"/></a></div>');
document.write('<h3 class="title"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></h3>');
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('');
document.write(postcontent);
document.write('');
} else {
document.write('');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('');
}
}
var towrite = '';
var flag = 0;
document.write('<br>');
if (showpostdate == true) {
towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear;
flag = 1;
}
if (showcommentnum == true) {
if (flag == 1) {
towrite = towrite + ' | ';
}
if (commenttext == '1 Comments') commenttext = '1 Comment';
if (commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '<a href="' + commenturl + '" target ="_top">' + commenttext + '</a>';
towrite = towrite + commenttext;
flag = 1;;
}
if (displaymore == true) {
if (flag == 1) towrite = towrite + ' | ';
towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top">More »</a>';
flag = 1;;
}
document.write(towrite);
document.write('</li>');
if (displayseparator == true)
if (i != (numposts - 1))
document.write('');
}
document.write('</ul>');
}
//]]>
< /script>
<!-- Recent Posts by Label End -->
Bước 2: Tạo widget bài viết theo nhãn
Bạn tiến hành thêm mới 1 Widget HTML trong giao diện Blogger. Sau đó bạn tiếp tục dán đoạn code sau đây:
<script type='text/javascript'> var numposts = 6; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script> <script type="text/javascript" src="/feeds/posts/default/-/Nhãn?published&alt=json-in-script&callback=labelthumbs"></script>
Trong đó:
| Biến | Giá trị | Mô tả |
|---|---|---|
| numposts | dạng số | Số bài viết cần hiển thị |
| showpostthumbnails | true / false | Hiển thị ảnh đại diện |
| displaymore | true / false | Hiển thị liên kết xem thêm |
| displayseparator | true / false | Hiển thị đường phân cách giữ các bài viết |
| showcommentnum | true / false | Hiển thị số bình luận của mỗi bài viết |
| showpostdate | true / false | Hiển thị ngày đăng bài viết |
| showpostsummary | true / false | Hiển thị nội dung tóm tắt của bài viết |
| numchars | dạng số | Số lượng ký tự của phần nội dung tóm tắt |
Bước 3: Tùy chỉnh CSS
Bạn tiến hành vào chỉnh sửa giao diện Blogger, và thêm vào các thuộc tính CSS sau đây:
.label_with_thumbs{}
.label_with_thumbs li{}
.label_with_thumbs li .post-thumnail{}
.label_with_thumbs li .post-thumnail img{}
.label_with_thumbs li .post-content{}
.label_with_thumbs li .post-content h3{}
.label_with_thumbs li .post-content .meta-post{}
Và đến đây là Widget hiển thị bài viết theo từng nhãn Blogger đã hoàn chỉnh. Chúc bạn thành công nhé !
