Tạo bài viết liên quan có ảnh cho blogspot dạng 2 cột

Bài viết liên quan có ảnh cho blogspot dạng 2 cột được sử dụng khá phổ biến trong các blog hiện nay. Dạng bài viết liên quan (Related Post) này rất tiện lợi cho người đọc, vì được chia theo 2 cột nên bài viết liên quan có ảnh sẽ làm cho người đọc dễ dàng tìm thấy các bài viết mà họ cần tìm hơn.



tạo bài viết liên quan có ảnh cho blogspot dạng 2 cột

Hướng dẫn tạo bài viết liên quan có ảnh cho blogspot dạng 2 cột


Bước 1: Đăng nhập vào Blog => Vào Mẫu => Chọn Chỉnh sử HTML (Edit HTML)

Bước 2: Dán code ngay phía trên </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type="text/javascript"> //<![CDATA[ var titles=new Array(); var titlesNum=0; var urls=new Array(); time=new Array(); function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])) {b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a) {var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Dont't Relate Posts</li>")} else{while(b<titles.length&&b<19&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}} document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)}; //]]> </script> </b:if>

Bước 3: Tìm 4 đoạn sau:

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

Chèn code ngay dưới code một trong 4 đoạn vừa tìm thấy hãy nhớ là phải thử nhé nếu không được dòng này thì chuyển qua dòng khác

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b>Bài viết liên quan:</b> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script> </div> </b:if>

Tùy chỉnh:
  • 5; là số bài viết liên quan được hiển thị nhé!
Ok chúc các bạn có một blog đẹp sau khi đọc xong bài viết hướng dẫn tạo bài viết liên quan có ảnh cho blogspot dạng 2 cột nhé!
Hướng dẫn tạo bài viết liên quan có ảnh cho blogspot dạng 2 cột

SHARE THIS

Author:

Etiam at libero iaculis, mollis justo non, blandit augue. Vestibulum sit amet sodales est, a lacinia ex. Suspendisse vel enim sagittis, volutpat sem eget, condimentum sem.