Ở
bài viết trước, Namkna đã giới thiệu đến các bạn tiện ích Recent Posts mang phong cách Báo tr
í. Nhận thấy đây là một style Recent post rất hay với một số tùy chỉnh nâng cao được rất nhiều bạn đọc yêu thích. Và cũng theo yêu cầu của một số bạn là làm sao cho tiện ích gọn hơn, sử dụng chung một file javascipts , nên hôm nay namkna sẽ chia sẻ đến các bạn một tùy biến nâng cao và cập nhật của style này.
Những cập nhật nâng cao mới :
- Thêm ảnh thunbile cho những bài viết không có ảnh minh họa
- Sử dụng chung một file Javarscipt chèn thẳng vào template. Tất cả trong 1 với Recent post tất cả các bài viết và recent post theo nhãn.
- Giao diện : bắt hơn so với style cũ....
- Khả năng SEO : thân thiện hơn với các SE) do chèn thêm thuộc tính Alternate cho Images
- Cài đặt đơn giản hơn: Tiết kiệm thời gian và dung lượng của template
- Thêm liên kết “xem thêm” kèm hình ảnh nhỏ xinh He...he...he...
Cách tiến hành!
1- Đăng nhập vào blog
2- CHọn
Mẫu (Template)
3- CHọn
chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn code bên dưới trước thẻ
]]></b:skin>/*----------------------------------
Recent post Magazine for homepage blogger
Edit by: http://namkna.blogspot.com/
------------------------------------*/
.fl{float:left}
.fr{float:right}
.folder{width:516px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCo00RgO8Bp5J_MaFwZE2IJ2GntKTSLDxTj4X8nOOk4xZzxmcZZpXLbaDX_58OZbcdiNRVUe6sd4qxrqSQPKQfba-koono858LEjPa5gLrMXdZdG606HWZLuFjtiN0RAjt-zz1VV3-Zw_D/h120/catalog_header_bg-namkna-blogspot-com.gif) repeat-x}
.folder-active{height:24px; padding:4px 10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhueo1_gfsm8o5YvqILRDIOO6lfj9G_SGgGh6iKdgLt2DL675ETXphVksMFG40L7wGKZUArhMT7TCQc5cqTU21Wr18cvlgGL4fig5HgndOQUWnLNrcHqK8fjLVLFncylzESXs_auvLq_bGI/h120/parent_bg-namkna-blogspot-com.gif) repeat-x; font-weight:bold}
.link-folder:link, .link-folder:visited{color:#fff}
.subfolder{height:24px; padding:5px 5px 0 15px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9uzDBob4f4VcwL44EbwjDC49PVH026fnfYQHwW6Br_HtISDMzBoEguAf2qGZUJy-NtFboFnMMT0h_0lJ1Qtymgcd55IuQXQSxw40nov2qpyUja3IIPckeadw1x1zhcaO3kIfQTgPRBqy/h120/parent_child_spc-namkna-blogspot-com.gif) no-repeat}
.folder-content{width:500px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3OkFTygIu2wW-1PQJF8Pvh5FwRl_aaCBTg4cQA20BDK3UoyLk30DAnBN42oSn4HAMN6xKpBgHY9qnnZDfwLlsCMgfbf61vJpTBZKpFfYp2GXw5XzF6QIhZO6aGrYS5z_rshUuSPMFgqG/h120/red-box-content-namkna-blogspot-com.png) repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}
.folder-content p{margin:0}
.folder-content ul{list-style:none; margin:0; padding:0}
.folder-content li{padding:0 0 4px 6px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_fwRSl4uzYROwCnpPG3iGjuXcYBaM9Y4EN5FbDMvuL6jIWv6me2j19zSHEdj94u7eNpxeXdxnx_jLGQLbfd1xv1T-pHW9gr-kgQIHsPMwzG_Aky_KB26iOGuGH7T0qtNXI5AZ8LGiRjkl/h120/icon-namkna-blogspot-com.gif) no-repeat 0 8px}
.folder-topnews{width:312px; padding-right:10px}
.folder-othernews{width:168px}
.other-folder{margin:0}
.img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}
.img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}
.xemthem{float:right; display:block; margin:0; padding:5px}
5- Thêm đoạn code dưới trước thẻ
</head><script type='text/javascript'>
//<![CDATA[
imgr = new Array();
showRandomImg = true;
summaryPost = 230;
numposts2 = 5;
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq9pGipzjmFQPYmg9zTDZM0w4kU52VOZGalYn8BL6LYdfRyabe_a7LoI8ecBGBXt3mPUvFAEg5mBrw1VA_E1AD-rgb8xymy0MzFXprwhIkYC9YjGv3SsfRK_jV04962ipOkd-Hs-v2Ll2y/s1600/noimage-namkna-blogspot-com.png";
aBold = true;
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 showrecentposts2(e) {
j = (showRandomImg) ? Math.floor((imgr.length + 1) * Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts2; 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 l = f.content.$t
} else if ("summary" in f) {
var l = f.summary.$t
} else var l = "";
if (j > imgr.length - 1) j = 0;
img[i] = imgr[j];
s = l;
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;
if (i == 0) {
var m = '<div class="folder-topnews fl"><img src="' + img[i] + '" title="' + g + '" class="img-subject fl"><p style="padding-bottom:5px"><a href="' + h + '"><b>' + g + '</b></a></p><p>' + removeHtmlTag(l, summaryPost) + '</p><a href="' + h + '" class="xemthem">Xem thêm <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxMGmvZba28HO_yUkY82-djCTmHkklc1A9YrSXYQDXmB-2sLDc_yqxzU9dDFm5NlBVjykMecYTbXqbc3BQwEeBnl0FKKDhgNBuLr-mFZ8ECWaKkMgq_sE0MINfymuhGUaijvl5Tzy2xVU/" alt="' + g + '"/></a></div>';
document.write(m)
}
if (i == 1) {
var m = '<div class="folder-othernews fl"><div class="other-folder fl"><img alt="" class="img-other fl" src="' + img[i] + '" alt="' + g + '"><a href="' + h + '">' + g + '</a></div>';
document.write(m)
}
if (i == 2) {
var m = '<div class="fl"><ul><li><a href="' + h + '">' + g + '</a></li>';
document.write(m)
}
if ((i > 2) && (i < numposts2 - 1)) {
var m = '<li><a href="' + h + '">' + g + '</a></li>';
document.write(m)
}
if (i == numposts2 - 1) {
var m = '<li><a href="' + h + '">' + g + '</a></li></ul></div></div>';
document.write(m)
}
j++
}
}
//]]>
</script>
6- Tìm đoạn mã sau:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
- Thêm đoạn code dưới vào sau nó (Bạn cũng có thể thêm vào tiện ích HTML/Javarscip bên dưới bài đăng):
<!-- Recnet post all -->
<div class='folder'><div class='folder-title'><div class='folder-active fl'>
<a class='link-folder' href='http://namkna.blogspot.com/search/label/Blogspot%20Recent post?&max-results=5'>Recent post</a></div>
<div class='subfolder fl'>
<a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Menu?&max-results=5'>Menu</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Navigation?&max-results=5'>Navigation</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Comments?&max-results=5'>Comments</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Popular posts?&max-results=5'>Popular posts</a></div></div><div class='folder-content' id='tdHomeFolder2'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
</div>
<!-- Nhãn 2 -->
<div class='folder'><div class='folder-title'><div class='folder-active fl'>
<a class='link-folder' href='http://namkna.blogspot.com/search/label/Blogspot%20Recent post?&max-results=5'>Recent post</a></div>
<div class='subfolder fl'>
<a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Menu?&max-results=5'>Menu</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Navigation?&max-results=5'>Navigation</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Comments?&max-results=5'>Comments</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Popular posts?&max-results=5'>Popular posts</a></div></div><div class='folder-content' id='tdHomeFolder2'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Tên nhan 1?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
</div>
<!-- nhãn 1 -->
<div class='folder'><div class='folder-title'><div class='folder-active fl'>
<a class='link-folder' href='http://namkna.blogspot.com/search/label/Blogspot%20Recent post?&max-results=5'>Recent post</a></div>
<div class='subfolder fl'>
<a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Menu?&max-results=5'>Menu</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Navigation?&max-results=5'>Navigation</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Comments?&max-results=5'>Comments</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Popular posts?&max-results=5'>Popular posts</a></div></div><div class='folder-content' id='tdHomeFolder2'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Tên nhan 2?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
</div>
7- Lưu mẫu lại:
