» » Recent posts Magazine for homepage blogger

Recent posts Magazine for homepage blogger

Người đăng: ngaybennhau on Thứ Năm, 11 tháng 4, 2013




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/AVvXsEh8V-o7TIHSL-th-vYDR9IszI7zFRJXE6Y9SDqOgi2jYkrreioWOlLZb82RcukGVi8Iopz_waDkh2YDhba-MXHEj8ysKokxCLHjoMGrimPptBr5BC6_OYlNIdd2XalQz7yCygdY_bxQUTiO/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/AVvXsEjs5S8Fi31CNxWVLlO54NI_4Bnyw3Ehz-XQRvf_i_sf9vfXrMZwKq534LskO8CnJSMz8ae9tdnoZnGFk2cXwsw4jbjyquZhMR5_-9qwx3p3ZLIPbGjMWYLvV7DjQbtiJxnc8chOXq-bbfFu/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/AVvXsEjVji6yP-RPFGMUsIQ7o0Spg994Zu2azO1GqmenA_2Q77KiMYr_xDICp291lzQ7EOPUH7dHlGTYYy6-F2_CTAa1fyfi4gISXhAsPxK-Q34vyeSU5bhVv9txn9fbmp8ibDJWUxQXEPdZHuBl/h120/parent_child_spc-namkna-blogspot-com.gif) no-repeat}
.folder-content{width:500px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIgejtgFQnJqmm4K0QeXQaU2ZRNl13rk7cQe4eW7-pH58E8N3f6Ugv1-qSHfmQqLQ4E-l8VFvCVkcYYFYcTIHe1GyKr9cuSUkPG2P65-Sok7r-BDFZimmMmHukQr651aMvZcw6EteRxAG7/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/AVvXsEi9tr8lvC3J611NOrBuMsa_G58jaZj-j9W8DHsI9yHkgShwKSNyitNgQOR1W5rChA6v0u6xR4eogUl3HzgTSs0J8xu8H1sv3ye0CeHwuvh0SF3epT7H6XmrUIG_eXyl6eYbefrqxxu0SUL3/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/AVvXsEggjkrW9row1e1rl8RSoymilpzbqh3r-yiTeguLXxIwcR_lnMOc3pvnkyvg1qjn0bJOX7OxhLpK8u1WG2tbMjLKFWlkoLMhEvjqunIJU2oJEag-yIpfpH6TFBQOVlFfw84lEUiUAfNdow8F/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/AVvXsEgUrPEMjkzVp4MweUFN9w-LcWjyq9g03reBK6R6cFQ0xIHaJnf7RZrR_gPpi_uGQb0iLixdlaVd4GNjxL5sxDUx6F0R9Olln55qjdgjUZxwuC-Bk4aYnJufiloHEQc4kvfE7vntHh2MRnc/" 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:if cond='data:blog.url == data:blog.homepageUrl'>
<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?&amp;max-results=5'>Recent post</a></div>
    <div class='subfolder fl'>
    <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Menu?&amp;max-results=5'>Menu</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Navigation?&amp;max-results=5'>Navigation</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Comments?&amp;max-results=5'>Comments</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Popular posts?&amp;max-results=5'>Popular posts</a></div></div><div class='folder-content' id='tdHomeFolder2'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</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?&amp;max-results=5'>Recent post</a></div>
    <div class='subfolder fl'>
    <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Menu?&amp;max-results=5'>Menu</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Navigation?&amp;max-results=5'>Navigation</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Comments?&amp;max-results=5'>Comments</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Popular posts?&amp;max-results=5'>Popular posts</a></div></div><div class='folder-content' id='tdHomeFolder2'>

<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhan 1?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</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?&amp;max-results=5'>Recent post</a></div>
    <div class='subfolder fl'>
    <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Menu?&amp;max-results=5'>Menu</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Navigation?&amp;max-results=5'>Navigation</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Comments?&amp;max-results=5'>Comments</a> | <a class='link-subfolder' href='http://namkna.blogspot.com/search/label/Blogspot Popular posts?&amp;max-results=5'>Popular posts</a></div></div><div class='folder-content' id='tdHomeFolder2'>

<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhan 2?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
    </div> 
</div>
</b:if>
7- Lưu mẫu lại:
vào lúc 02:05
Nhãn: , , ,

{ 0 nhận xét... read them below or add one }


Đăng nhận xét