Tiện ích Bài viết mới hơn và cũ hơn giống VnExpress.net

Thủ thuật tạo tiện ích Bài viết liên quan mới hơn và cũ hơn cùng chủ đề trước đây được blogger Anh Võ (vietguideweb.com) đã từng phát triển tiện ích dạng này và có nhiều trang giới thiệu lại, tuy nhiên thành công không như mong đợi đối với blogspot tiếng Việt bởi với các nhãn bằng tiếng Việt sẽ không hoạt động được tốt.
Nếu áp dụng lại thủ thuật của Anh Võ nhiều blog khác thì sẽ phải chỉnh lại tên các nhãn sang tiếng Anh hoặc tiếng Việt không dấu. Để giải quyết vấn đề này Huỳnh Nhật Hạ đã áp dụng tiện ích Next Posts and Previous Posts được giới thiệu trên  www.vietutd.blogspot.com và chỉnh sửa code để hiển thị tốt với nhãn tiếng Việt.
Xin giới thiệu với các bạn tiện ích Bài viết mới hơn và cũ hơn cùng chủ đề (Newer and Older Related Posts) mà bạn thường thấy ở trang VnExpress.net.
Và dưới đây là hình minh họa.

Còn chờ gì nữa nào, chúng ta cùng cài đặt tiện ích này.

Bước 1. Đăng nhập Blogger

Vvào Design >> Edit HTML, chọn Expand Widget Templates.

Nếu bạn đã từng cài đặt các tiện ích Bài viết liên quan kiểu khác thì nên tháo ra khỏi Template.

Đặt đoạn code sau đây vào sau dòng ]]></b:skin>.

    <!--Related Posts Styled by Huynh Nhat Ha Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;}
    #related-posts a{color:blue}
    #related-posts a:hover{color:brown}
    #related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0;text-decoration:none;font-size:12px;text-color:#000}
    #related-posts ul li{display:block;/*background:url(&quot;http://img840.imageshack.us/img840/2004/rssqn.png&quot;) no-repeat 0 0;*/background:url(&quot;http://img208.imageshack.us/img208/9070/weedbullet.gif&quot;) no-repeat 0 0;list-style-type:none;margin:0;padding-left:21px;line-height:1.5em;border-bottom:1px dotted #ccc}
    </style>
    </b:if>
    <!--Related Posts Styled by Huynh Nhat Ha End-->

Bước 2. Chèn Code Script

Tìm một trong các dòng dưới đây:

<div class='post-footer-line post-footer-line-1'/>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

<div class='post-footer'>

Đặt trước nó bằng đoạn code bên dưới.

    <!-- Related Posts Code Styled by Huynh Nhat Ha Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script language='javascript'>
    // <![CDATA[
    var maxnext = 5; // Chỉnh số 5 chỉ số bài viết mới hơn tối đa
    var nexttitle = 'Bài viết mới hơn';
    var maxprev = 8; // Chỉnh số 8 chỉ số bài viết cũ hơn tối đa
    var prevtitle = 'Bài viết cũ hơn';
    // ]]>
    </script>
    <script src='http://hacodeproject.googlecode.com/files/newer-older-related-posts.js' type='text/javascript'/>
    <div id='related-posts'>
    <div id='next-posts'/>
    <b:loop values='data:post.labels' var='label'>
    <script language='javascript'>
    var vlabel = &quot;<data:label.name/>&quot;;
    if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
    {nextlabel = (relatedlabel == vlabel) ? 0 : 1;}
    if (nextlabel == 0)
    {
    var vtime = &quot;<data:post.timestampISO8601/>&quot;;
    vtime = vtime.substring(0,19);
    var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=next_results_labels&amp;max-results=999&quot;;
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, srcurl);
    script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
    nextlabel +=1;
    }
    </script>
    </b:loop>
    <div id='prev-posts'/>
    <b:loop values='data:post.labels' var='label'>
    <script language='javascript'>
    var vlabel = &quot;<data:label.name/>&quot;;
    if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
    {prevlabel = (relatedlabel == vlabel) ? 0 : 1;}
    if (prevlabel == 0)
    {
    var vtime = &quot;<data:post.timestampISO8601/>&quot;;
    vtime = vtime.substr(0,19);
    var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=prev_results_labels&amp;max-results=999&quot;;
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, srcurl);
    script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
    prevlabel ++;
    }
    </script>
    </b:loop>
    </div>
    </b:if>
    <!-- Related Posts Code Styled by Huynh Nhat Ha End-->

Lưu Template là OK.

Bạn hãy giữ nguyên phần chú thích để tôn trọng bản quyền tác giả nhé.

theo Blog Huỳnh Nhật Hạ