Bài viết liên quan mới,cũ cùng chủ đề 2 cột cho blog

Một trong những điều khiến độc giả cảm thấy thân thiện và dễ theo dõi tìm kiếm thông tin liên quan là tiện ích bài viết liên quan . Tiện ích hôm nay Viettin365 mang đến cho các bạn gồm 2 cột (Bài viết mới hơn và cũ hơn cùng chủ đề) nhìn giao diện của nó rất đẹp mắt . Chúng ta có thể bắt gặp tiện ích Bài viết liên quan mới, cũ  cùng chủ đề 2 cột này trên các trang web tin tức, giải trí lớn.

Ảnh minh họa :

Bắt đầu thủ thuật 
1. Đăng nhập blogger
2. Chọn mẫu => Chỉnh sửa HTML
3. Dán đoạn code bên dưới trước thẻ ]]></b:skin>

#related-posts-block ul{) repeat-x;margin:0px 0 0 0;padding:6px 0 0 0;list-style:none}#related-posts-block li{margin:0 0 0 8px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Yj57NjL2CtQyTzDfrI0TxQg3gmo8_yBL1g1l9LHIX7Rwq8UeoGffaAU4DVyoeL4pDLtY1d2JkgKd8d_47v3beUXZYno6uSof9FYvtfabAI7XN3czW6XF_pgiv-ib4xs3HjRBtD51BOU/s1600/Viettin24h-icon.gif) 0 5px no-repeat;padding-left:15px}#related-posts-block{line-height:1.5;margin:0 0;font-size:11px;color:#7c7b7b}#related-posts-loading-text{font-size:12px;text-align:center;color:#002c28}#related-newest-href{margin:10px 0 2px}#related-newest-title{font-size:12px;margin:5px 0 0 0;color:#033947}#related-posts-block #related-newest-href a{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#002c28}#related-posts-block #related-newest-href a:hover{color:#ff0000}#related-older-href{margin:10px 0 2px}#related-older-title{font-size:13px;margin:5px 0 0 0;color:#033947}#related-posts-block #related-older-href a{font-size:13px;font-family:Arial,Helvetica,sans-serif;color:#002c28}#related-posts-block #related-older-href a:hover{color:#ff0000}#related-posts-block > div {float: left;width: 49%;}

4.Tìm đến 1 trong các thẻ : 

<div class='post-footer'>

<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'> 

và dán sau nó đoạn code bên dưới

<div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></div>
<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>

<div id='related-posts-block'>

<div id='related-newest-href'><div id='related-newest-title'/></div>
<div id='related-older-href'><div id='related-older-title'/></div>
</div>

<script language='javascript'>
/* <![CDATA[ */
var showdate = true;
var max_post = 16;

function format(a){return a.substr(0,19)}function formatdate(a){for(var b=[1,2,3,4,5,6,7,8,9,10,11,12],c="01,02,03,04,05,06,07,08,09,10,11,12".split(","),e=parseInt(a.substring(5,7),10),d=0;d<b.length;d++)if(e==b[d]){e=c[d];break}return a.substring(8,10)+"/"+e+"/"+a.substring(4,2)} function getRelatedNewestLinks(a){if(a=a.feed.entry)for(var b=0;b<a.length;b++){var c=document.createElement("li");c.innerHTML=showdate?'<span style="margin-top:-3px;"> '+formatdate(a[b].published.$t)+" </span> <a href='"+a[b].link[4].href+"'>"+a[b].title.$t+"</a>":"<a href='"+a[b].link[4].href+"'>"+a[b].title.$t+"</a>";if(!checkRelaxLinks("related-newest-href",a[b].link[4].href))document.getElementById("related-newest-href-ul1").appendChild(c),document.getElementById("related-newest-title").innerHTML= "<b>C\u00e1c b\u00e0i vi\u1ebft m\u1edbi c\u00f9ng ch\u1ee7 \u0111\u1ec1</b>";document.getElementById("related-posts-loading-text").style.display="none"}else document.getElementById("related-older-title").innerHTML="<b>Kh\u00f4ng c\u00f3 b\u00e0i vi\u1ebft m\u1edbi n\u00e0o c\u00f9ng ch\u1ee7 \u0111\u1ec1</b>"} function getRelatedOlderLinks(a){if(a=a.feed.entry)for(var b=0;b<a.length;b++){var c=document.createElement("li");c.innerHTML=showdate?" "+formatdate(a[b].published.$t)+" <a href='"+a[b].link[4].href+"'>"+a[b].title.$t+"</a>":"<a href='"+a[b].link[4].href+"'>"+a[b].title.$t+"</a>";if(!checkRelaxLinks("related-older-href",a[b].link[4].href))document.getElementById("related-older-href-ul2").appendChild(c),document.getElementById("related-older-title").innerHTML="<b>C\u00e1c b\u00e0i vi\u1ebft c\u0169 c\u00f9ng ch\u1ee7 \u0111\u1ec1 </b>"}else document.getElementById("related-older-title").innerHTML= "<b>Kh\u00f4ng c\u00f3 b\u00e0i vi\u1ebft c\u0169 n\u00e0o c\u00f9ng ch\u1ee7 \u0111\u1ec1</b>";document.getElementById("related-posts-loading-text").style.display="none"} function createRelatedJson(a,b,c,e){var d=document.createElement("script");d.src="/feeds/posts/summary/-/"+escape(b)+"?orderby=published&max-results="+e+"&published-"+a+"="+escape(format(document.getElementById("post-timestamp-for-related").innerHTML))+"&alt=json-in-script&callback="+c;d.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(d)} function checkRelaxLinks(a,b){for(var c=!1,e=document.getElementById(a).getElementsByTagName("a"),d=0;d<e.length;d++)if(e[d].href==b){c=!0;break}e=location.href.split(".html")[0]+".html";b==e&&(c=!0);return c} function createRP(){var a=document.getElementById("post-labels-for-related").innerHTML.split(","),b=Math.round(max_post/a.length),c=document.createElement("ul");c.id="related-newest-href-ul1";document.getElementById("related-newest-href").appendChild(c);for(c=0;c<a.length;c++)createRelatedJson("min",a[c],"getRelatedNewestLinks",b);c=document.createElement("ul");c.id="related-older-href-ul2";document.getElementById("related-older-href").appendChild(c);for(c=0;c<a.length;c++)createRelatedJson("max", a[c],"getRelatedOlderLinks",b)}createRP();
/* ]]> */ 
</script>

showdate = true   : Hiện ngày-tháng-năm ( Chuyển thành False nếu bạn muốn ẩn)

var max_post = 16 : Số bài viết ở 2 cột

5. Lưu lại và xem kết quả 

Chúc các bạn thành công .