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

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.

Bước 1. Đăng nhập Blogger:Thiết kế > Chỉnh sửa Html >Chon mở rộng mẫu tiện ích:

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 Bloggerism.tk 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 bloggerism.tk 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à Xong?

Theo Bloggerism.tk