Đây là 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.


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, và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. 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.