23 tháng 6, 2012

bài viết mới nhất theo từng trương mục - Recent Posts dành cho blogspot ves 1

Tiện ích Recent Posts dành cho blogspot ves 1

Tiện ích Recent Posts giống namkna.blogspot.com
Recent Posts là tiện ích giúp hiển thị những bài viết mới nhất theo từng trương mục hoặc cho toàn bộ Blog.
Đây là tiện ích được sử dụng rất phổ biến trên các WebBlog nhằm “hô biến” 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í (Magazine Template), giúp Blog bạn trở nên “Pro” hơn trong mắt độc giả.
            Tuy nhiên, việc ứng dụng nó cũng gây ra một số “tác dụng phụ” như : ảnh hưởng đến tốc độ load Blog, không tốt cho SEO,…do phải sử dụng JavaScript để lấy dữ liệu từ nguồn cấp Feed. Vì vậy, bạn hãy suy nghĩ thật kỹ trước khi áp dụng nó cho Blog của mình.
          Và bắt đầu từ bài viết này, namkna sẽ giới thiệu đến các bạn một số Style để các bạn lựa chọn, bắt đầu với tiện ích Recent Posts giống namkna.blogspot
☼ Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào Thiết kế
   3- Chọn Phần tử trang
   4- 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/AVvXsEgHUPanSsGnyQhxeDNlIR8ItBdvnjyqqYrK2-t_225_lUVR0S_-dYAJDHfORdPIMLd7Bvb435la0Mb9LilfdO6uC4aPpqwvkuIJ6jFxg2w8h1EzJi8BQgOaobIyBCYLpK_XILcz0JIzBaNL/) 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://namkna.blogspot.com/search/label/Blogspot-tips?&amp;max-results=8">Thủ thuật blog</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://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>
Trong đó:
  • 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://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
- Thànhđoạn code bên dưới.
document.write("<script src=\"http://namkna.blogspot.com/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
   5- Sau đó bấm Lưu Mẫu lại. 

=>Update : 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/AVvXsEiEmg_f-zttMAY3dvp7a76fLROOysPaN_vfD__c-g5VVVa4hMB86afDm92CjOc-2V190NcVAURuy78kLkxuYj8_f0_gaMz5ujKXitCL0upyopypNzKg7aK2_NZbcI0HshXzNz7RpWUc3y_0/s1600/tag_blue-namkna.gif)
 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://namkna.blogspot.com/search/label/Blogspot-tips?&amp;max-results=8">Thủ thuật Blog</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/AVvXsEiBZKzjOLxZTndZyKw6nYPpFqgLvmvwTsqw3O-lefxQ0oWPyyGF25j9LIByWeZ87M0DaCpY4nOeWgSrrj6zWgDashEqM8_NUin6tx2Y14VlhKcpzXFCVQ-Havc4f-BborsHaMDDGCILRIUU/s1600/no-image-namkna.jpg";} 
 
        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://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?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 
  • Nếu chưa biết mã màu thì bạn vào đây để lựa chọn cho mình mã màu như ý nha.
  • Nếu muốn rút gọn tiêu đề khi bài viết quá dài thì bạn xem cách làm ves2 tại đây.
- Lưu ý :Để sử dụng thủ thuật lâu dài bạn hãy download các file ảnh về và upload lên host riêng nha.

Chúc các bạn thành công ! 
Tham khảo:itechplus
Chủ đề:

Người đăng: vào lúc
Nhãn: , ,

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)
Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn kynangblog.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. KỸ NĂNG BLOG - All Rights Reserved
Design by KyNangBlog Edit Ky nang blog
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million kynangblog template byKyNangBlog
Blogger Gadgets