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.

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é.

Posted in: Blog