Tiện ích Bài viết mới nhất dành cho đối tác VIP

Trong quá trình phát triển chương trình cộng tác viên, mình đã nghĩ ra cách tạo tiện ích Bài viết mới nhất dành cho đối tác VIP với mục đích vinh danh công sức của cộng tác viên và cuối cùng mình đã thử nghiệm thành công. Hôm nay xin giới thiệu với bạn đọc, một là chia sẻ một thủ thuật mới, hai là dành tặng cho cộng tác viên đầu tiên của Thủ thuật Blogger, đó là blogger có biệt danh peace19812006 vì sự nhiệt tình của anh ấy cùng sự tin cậy của anh ấy đối với Thủ thuật Blogger.

Đặc điểm của tiện ích này là bố trí bài viết đầu tiên dưới dạng: ảnh đại diện, tiêu đề bài viết và phần trích dẫn; các bài viết tiếp theo chỉ hiển thị tiêu đề. Ngoài ra có thể đặt ảnh đại diện chỉ định riêng cho một số nhãn phổ biến trong blogspot (dùng cho trường hợp bài viết không có ảnh). Trong tiện ích này có phần logo cho trang. Bạn có thể xem Demo bên dưới.

Để cài đặt tiện ích này bạn hãy thực hiện như sau:

Đăng nhập Blogger, vào Page Elements. Đặt toàn bộ đoạn code sau đây vào một tiện ích HTML/Javascript.

<style type="text/css">
#rcp-VIP {width: 300px;}
#rcp-VIP a:hover {color: #AC0101}
#rcp-VIP h4 {font-family:Arial,serif;font-size: 14px;font-weight: normal;line-height: 1;}
#logo {margin-bottom:15px;text-align:center;font-size: 18px;}
#rcp-VIP table {border-spacing: 0;height: 80px;margin-bottom: 10px;width: 290px;}
#rcp-VIP table td {vertical-align: middle;}
#rcp-VIP table a {color: #069;text-decoration:none}
#rcp-VIP table.first td.title {padding-top: 3px;border-bottom: 1px solid #202931;border-top: 1px solid #202931;height: 20px;}
#rcp-VIP table td.thumb {padding-top: 3px;text-align: center;width: 50px;}
#rcp-VIP table.first h4 {text-align: center;}
#rcp-VIP table.any h4 {border-bottom: 1px solid #202931;border-top: 1px solid #202931;margin-left: 10px;padding: 5px;}
#rcp-VIP table img {border: 1px solid #202931;height: 50px;width: 50px;}
#rcp-VIP table.first td.text {color: #000000;font-family: Tahoma;font-size: 14px;height: 60px;line-height: 1;padding-left: 10px;width: 240px;}
#rcp-VIP div.single li {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitcleX-Xj0bBZPsIx2HCJ_-wWE8x2W44KWicOcPGbqGGuOSx-RBEadrOxg0MqKZmmUoXLPjmA4QmCZdtGjqIPzKKFsjbn932JCnmZdDRRnX2LzfsSmuPmGD6SMNfYP_1naw7HT-LdhImA/s1600/arrow_right.png) no-repeat scroll left 50%;height: 20px;line-height: 20px;padding-left: 20px;list-style:none}
#rcp-VIP div.single li a {height:50px;color: #069;font-family:Arial,serif;font-size: 14px;text-decoration:none}
#rcp-VIP div.single li a:hover{color: #AC0101}
#rcp-VIP div.single {height:45px}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Posts from VIP Blogspot Widget by www.thuthuatblogger.info

function getTitle(entry,res) {
var t = entry.title.$t;
if(res) {
t = t.substring(0,res);
}
return t;
}

function getUrl(entry) {
var url;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
return url;
}

function getContent(entry,res) {
var c = "";
if ("content" in entry) {
c = entry.content.$t;
} else if ("summary" in entry) {
c = entry.summary.$t;
}
if(res) {
c = removeHtmlTag(c,res);
}
return c;
}

function getThumbnail(entry) {
var t = "";
var s, a, b, c, d;
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!="")) { t = d; }
return t;
}

function removeHtmlTag(strx,chop){
var r = strx.split("<");
for(var i=0;i<r.length;i++){
if(r[i].indexOf(">")!=-1){
r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
}
}
r = r.join("");
var sss = "", p;
var r2 = r.split(" ");
for(var i=0;i<r2.length;i++){
p = sss + r2[i] + " "
if(p.length>=chop) {break;}
sss = p;
}
if(sss!=" ") {
sss += "&hellip;"
} else {
sss = "";
}
return sss;
}

function showrecentpostVIP(json) {
var entry, posttitle, posturl, postcontent, cat, strx_out;
var numposts = 6;
strx_out = "<div id='logo'><a title='' target='_blank' href='http://www.kienthucblogspot.info/'>KIENTHUCBLOGSPOT</a></div>"; // Bạn cần tùy biến chỗ này - có thể đặt URL_logo
for (var i = 0; i < numposts; i++) {
if (i == json.feed.entry.length) { break; }
posturl = "";
postcontent = "";
entry = json.feed.entry[i];
cat = entry.category[0].term;
posttitle = getTitle(entry);
posturl = getUrl(entry);
if(i==0) {
postcontent = getContent(entry,150); // Thay 150 chỉ số ký tự cho đoạn trích dẫn
postthumb = getThumbnail(entry); // Dưới đây đặt URL ảnh đại diện cho một số nhãn
if(postthumb=="") {
if(cat=="Tên nhãn 1"){postthumb = "URL_ảnh đại diện nhãn 1"}
if(cat=="Tên nhãn 2"){postthumb = "URL_ảnh đại diện nhãn 2"}
if(cat=="Tên nhãn 3"){postthumb = "URL_ảnh đại diện nhãn 3"}
if(cat=="Tên nhãn 4"){postthumb = "URL_ảnh đại diện nhãn 4"}
}
if(postcontent!="") {
strx_out += "<table class='first'>";
strx_out += "<tr><td class='title' colspan='2'><h4><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h4></td></tr>";
strx_out += "<tr>";
strx_out += "<td class='thumb' ><img src='" + postthumb + "' /></td>";
strx_out += "<td class='text'>" + postcontent + "</td>";
strx_out += "</tr>";
strx_out += "</table>";
} else {
strx_out += "<table class='any'>";
strx_out += "<tr>";
strx_out += "<td class='thumb' ><img src='" + postthumb + "' /></td>";
strx_out += "<td class='title'><h4><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h4></td>";
strx_out += "</tr>";
strx_out += "</table>";
}
} else {
strx_out += "<div class='single'><li><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></li></div>";
}
}
document.write(strx_out );
}
//]]>
</script>
<div id="rcp-VIP">
<script src="/feeds/posts/default?max-results=6&alt=json-in-script&callback=showrecentpostVIP"></script>
</div>

Trong đoạn code trên, bạn có thể tùy biến CSS khá dễ dàng sao cho phù hợp với blogspot của bạn. Đối với các bạn mới, nếu áp dụng gặp khó khăn gì, xin vui lòng nêu vấn đề bên dưới để cùng giải quyết.