http://componentstvonline.blogspot.com/: Blogspot Recent post

Recent posts Magazine for homepage blogger

Ở 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/AVvXsEhQsvhManVQa23r9NLWFDlCtbk8pjMww1M5z9PBkxVdsQkbHmM8oXs8LzVunjD6npbKo3KfpnY03VnaFo_SeaHBN1MUfZijKgkAY4cZbRhqXwEBvbb9WWq2Y1WlZEuoCWgl850sFLEI6rly/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/AVvXsEgM7uWG0RI1U_SkDoN6v6cjDtRvMINF7XlZWG5PAkEkWQtfLY0JhBk7XRETk2Npz0MAXraD4w0poTOv1xHahIgFodG0w9Ba3Ygu61ZWZe1hAUTsswQkE45CAcGVwIcQNjVUSVl4FnyD3ILW/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/AVvXsEjqdtuNDQSYLBSCinywDP_j4VXXteB_bSJTyD0el3G0p2nY3U7NMgP6TOSdPYYWYBYnknxBL-L4wavyMS8m76MgPz8YBIj79wOewXvMlXUleB4j7Pz5UVhf9_nVssL_IfifyYbQqynSXFVj/h120/parent_child_spc-namkna-blogspot-com.gif) no-repeat}
.folder-content{width:500px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvuUp_9HZLOLm18zXZD1hkM8zS9hoM5Fuj0BLboaj_e-AdnmnP6woj4e4ZHqr7mjuItTsnlIu_T-GfOc9V5nQvRixzxGig8XU0x2y1hSvOT-HB6pG_ZlEUk7jX3faI8xGFqpsqDDTowr02/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/AVvXsEg6yfwzhX2-j5Q_xTsiYdf-TAloSNkSM7blCOl6v_pOSClNaobtHK1JKb-4L_MfO8pKu2KD3lRsgg1srdyYbms2P4ZjwGgEYqsnUraHnsX9CeZzk8A5ANp17OWUWWqfGVTUdwmwrrBw8Osp/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/AVvXsEgBae2V4eQ6fI_lQJI7INv4sO-3CcB_32AFAQtbhlCPzj6bvxZK8Uw-nTH_LItoNx_2_Ly7rJay_y1bUORK9MfrJ2An-Eb6IDIVZ7Ni5lYGJBxyY60KlLcHdMTQicGwmHSrJb7em03FaEYN/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/AVvXsEiZxXMA596qAswmVIbyq6CKzwtURuXQdbvpnsT2JqumWmfz0VaXanckQNzmnRusMmEWBFpgi4CDoVNKj-NkXnA3ZvgRKO-RD99WL-0bgKEO4k3aapdbKIDZPrBeHnuD_3PXAjojABIZt0E/" 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?&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>

7- Lưu mẫu lại:

Đọc tiếp...

Xem bài viết trên phiên bản di động

Bài viết mới nhất trượt ngang đẹp cho blogger - Auto Recent Posts Slider jQuery Blogger

Bài viết mới nhất dạng thanh trượt ngang là một cách tốt để hiển thị bài viết gần đây của bạn dưới dạng một slide show. Bạn có thể nhìn thấy thanh trượt như vậy trong nhiều blog wordpress, nhưng với blogger nó không có nhiều người biết để áp dụng. Thủ thuật này được chia sẻ bởi Abu-Farhan và thêm một số code của helperblogger Và được mình chỉnh cho phù hợp với vlogger. Nếu bạn nghĩ rằng tùy biến rất khó thì bạn đã sai, tiện ích này rất dễ dàng tùy biến và thêm vào blog. Bạn không cần phải thêm hình ảnh, văn bản hoặc bất kỳ liên kết nào như các slider khác, tất cả là tự động.

Đọc thêm»

Đọc tiếp...

Xem bài viết trên phiên bản di động