Tiện ích Recent Posts giống iTechPlus
Recent Posts là tiện ích giúp hiển thị những bài viết mới nhất theo từng nhãn hoặc cho toàn bộ Blog với giao diện đơn giản thuần túy của Blogspot thành giao diện mang phong cách báo chí, giúp Blog bạn trở nên “Pro” hơn trong mắt độc giả.
Hình minh họa
* Cách thực hiện :
1. Vào Thiết kế > Phần tử trang
2. Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới :
* Trong đoạn code trên :
numposts = 5; : tổng số bài viết được hiển thị
list1 = 1; : số bài viết hiển thị kèm ảnh thumbnail
sumPosts = 168; : số ký tự mô tả ( summary )
* Nếu bạn muốn hiển thị bài viết mới nhất cho cả Blog thì thay thế đoạn code sau :
3. Save and Done.
* Cách thực hiện :
1. Vào Thiết kế > Phần tử trang
2. Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới :
<style type="text/css">
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEFfEJufdZykBk2ESA9m3JWsY07PuV5LKsygllotrtSr6JjFEohUIF0XnkRmlIcPOWFw8VU-P5WLuSz0LA_6IduVFMcOljbPIkyJEJkcxofErT9O0xv6plVBgIRliEIpgW_VtyvdEN3kU/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}
</style>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://www.dvt.com.vnus.info/search/label/Office?&max-results=8">Tin học văn phòng</a></h2>
<script type='text/javascript'>
numposts = 5; list1 = 1; sumPosts = 168;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
var s = a.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)
}
}
s = s.join("");
s = s.substring(0, b - 1);
return s
}
function showrecentposts(e) {
img = new Array();
for (var i = 0; i < numposts; i++) {
var f = e.feed.entry[i];
var g = f.title.$t;
var h;
if (i == e.feed.entry.length) break;
for (var k = 0; k < f.link.length; k++) {
if (f.link[k].rel == 'alternate') {
h = f.link[k].href;
break
}
}
if ("content" in f) {
var j = f.content.$t
} else if ("summary" in f) {
var j = f.summary.$t
} else
var j = "";
s = j;
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 l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
var m = '<li><a href="' + h + '">' + g + '</a></li>';
if ((i >= 0) && (i < list1)) {
var n = l
}
if (i == list1) {
var n = '<div class="itechplus-rc"><ul>' + m
}
if ((i > list1) && (i < numposts - 1)) {
var n = m
}
if (i == numposts - 1) {
var n = m + '</ul></div>'
}
document.write(n)
}
}
document.write("<script src=\"http://www.itechplus.info/feeds/posts/default/-/Office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>
* Trong đoạn code trên :
numposts = 5; : tổng số bài viết được hiển thị
list1 = 1; : số bài viết hiển thị kèm ảnh thumbnail
sumPosts = 168; : số ký tự mô tả ( summary )
* Nếu bạn muốn hiển thị bài viết mới nhất cho cả Blog thì thay thế đoạn code sau :
document.write("<script src=\"http://www.itechplus.info/feeds/posts/default/-/Office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");thành
document.write("<script src=\"http://www.itechplus.info/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
3. Save and Done.
* Update : một số bạn yêu cầu chèn thêm ảnh đại diện khi bài viết không có ảnh và tùy chọn để thay đổi màu chữ tiêu đề. Để làm điều này, bạn cần thay đoạn code chính của thủ thuật bằng đoạn code bên dưới :
<style type="text/css">
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-size:12px;font-weight:bold}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEFfEJufdZykBk2ESA9m3JWsY07PuV5LKsygllotrtSr6JjFEohUIF0XnkRmlIcPOWFw8VU-P5WLuSz0LA_6IduVFMcOljbPIkyJEJkcxofErT9O0xv6plVBgIRliEIpgW_VtyvdEN3kU/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}
</style>
<div id="itechplus-rc" class="itechplus-rc">
<h2><a href="http://www.itechplus.info/search/label/Office?&max-results=8">Tin học văn phòng</a></h2>
<script type='text/javascript'>
numposts = 5;
list1 = 1;
sumPosts = 168;
maintitle = "#f0c"; subtitle = "#39c"; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
var s = a.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)
}
}
s = s.join("");
s = s.substring(0, b - 1);
return s
}
function showrecentposts(e) {
img = new Array();
for (var i = 0; i < numposts; i++) {
var f = e.feed.entry[i];
var g = f.title.$t;
var h;
if (i == e.feed.entry.length) break;
for (var k = 0; k < f.link.length; k++) {
if (f.link[k].rel == 'alternate') {
h = f.link[k].href;
break
}
}
if ("content" in f) {
var j = f.content.$t
} else if ("summary" in f) {
var j = f.summary.$t
} else
var j = "";
s = j;
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;} else {img[i]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_olLmKLJDzfhGl3NKS9mgwh8m21_GWiYl6o_dQ-1FeHxcm4YJENf_6d6lhz5tu6xUuqM8GyL6ZRORJSBAQfZiBVZaS4k1ALSqiEcpcdJTvd4QPQ9bpwVsGNmLxoNB71uZhVrk5JbhME/";}
var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '" style="color:'+maintitle+'"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
var m = '<li><a href="' + h + '" style="color:'+subtitle+'">' + g + '</a></li>';
if ((i >= 0) && (i < list1)) {
var n = l
}
if (i == list1) {
var n = '<div class="itechplus-rc"><ul>' + m
}
if ((i > list1) && (i < numposts - 1)) {
var n = m
}
if (i == numposts - 1) {
var n = m + '</ul></div>'
}
document.write(n)
}
}
document.write("<script src=\"http://www.itechplus.info/feeds/posts/default/-/Office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>
Trong đó :
maintitle = "#f0c"; : màu tiêu đề bài viết đầu tiên ( có ảnh và trích dẫn )
subtitle = "#39c"; : màu tiêu đề các bài viết tiếp theo
* Lưu ý : đoạn code trên có sử dụng một số hình ảnh mà iTechPlus.info sử dụng. Vì vậy, để tránh ảnh hưởng đến site này và blog bạn, vui lòng download về và upload lên host riêng để sử dụng.
Rất đơn giản phải không các bạn !
Chúc các bạn thành công !
0 nhận xét:
Đăng nhận xét