Bài viết liên quan chỉ gồm tiêu đề bài viết với responsive cho blogspot

Tính năng hiển thị bài viết liên quan không chỉ giúp cho người đọc dễ dàng tìm các nội dung liên quan đến bài viết mà họ đang đọc, mà nó còn giúp chúng ta tăng cường các backlink nội bộ và cải thiện bounce rate, pageview rất tốt.

Khi độc giả đọc xong một bài viết tức là họ đang quan tâm đến vấn đề đó trên blog của bạn, họ sẽ nhận thấy các bài viết liên quan cùng chủ đề và hiển nhiên họ sẽ đọc tiếp các bài viết khác.

Sau đây là cách tạo widget related post hay bài viết liên quan chỉ gồm tiêu đề bài viết và đã responsive để phù hợp với thời cuộc.
Bài viết liên quan chỉ gồm tiêu dề bài viết với responsive cho blogspot

Widget này cố gắng đơn giản tới mức tối đa vì không lấy ảnh thumbnail hay đoạn trích và một số yếu tố khác để tối ưu tốc độ load của blog.
Bài viết liên quan chỉ gồm tiêu dề bài viết với responsive cho blogspot
Để cài đặt tiện ích này bạn cần tiến hành 3 bước trong mẫu
Bước 1
Các bạn vào chỉnh sửa mẫu và dán đoạn css sau vào trên thẻ ]]></b:skin>
#related-posts{float:left;width:100%;margin:20px 0}
#related-posts h4{font-size:18px;padding:10px 5px}
#related-posts ul{padding:0 25px;margin:0}
#related-posts ul li{padding:5px;border-bottom:1px solid #e6e6e6;list-style-type:disc}
@media screen and (max-width:800px){#related-posts{max-width:100%;width:100%;float:none}
}
Bước 2
Dán đoạn javascript sau vào trước thẻ </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
                        <script type='text/javascript'>
                          //<![CDATA[
                          function related_results_labels(a){for(var b=0;b<a.feed.entry.length;b++){var c=a.feed.entry[b];titles[titlesNum]=c.title.$t;for(var d=0;d<c.link.length;d++)if("alternate"==c.link[d].rel){urls[titlesNum]=c.link[d].href,time[titlesNum]=c.published.$t,titlesNum++;break}}}function removeRelatedDuplicates(){var a=new Array(0),b=new Array(0);e=new Array(0);for(var c=0;c<urls.length;c++)contains(a,urls[c])||(a.length+=1,a[a.length-1]=urls[c],b.length+=1,b[b.length-1]=titles[c],e.length+=1,e[e.length-1]=time[c]);titles=b,urls=a,time=e}function contains(a,b){for(var c=0;c<a.length;c++)if(a[c]==b)return!0;return!1}function printRelatedLabels(a){var b=a.indexOf("?m=0");b!=-1&&(a=a.replace(/\?m=0/g,""));for(var c=0;c<urls.length;c++)urls[c]==a&&(urls.splice(c,1),titles.splice(c,1),time.splice(c,1));var d=Math.floor((titles.length-1)*Math.random()),c=0;if(document.write("<ul>"),0==titles.length)document.write("<li>Không có bài viết liên quan → </li>");else for(;c<titles.length&&c<20&&c<maxresults;)b!=-1&&(urls[d]=urls[d]+"?m=0"),document.write('<li><a href="'+urls[d]+'" title="'+time[d].substring(8,10)+"/"+time[d].substring(5,7)+"/"+time[d].substring(0,4)+'">'+titles[d]+"</a></li>"),d<titles.length-1?d++:d=0,c++;document.write("</ul>"),urls.splice(0,urls.length),titles.splice(0,titles.length)}var titles=new Array,titlesNum=0,urls=new Array,time=new Array;
                          //]]>
                        </script> 
                     </b:if>
Bước 3
Tìm tới thẻ <div class='post-footer'> và dán ngay sau nó đoạn code bên dưới
<!-- Bài liên quan Start -->
                      <b:if cond='data:blog.pageType == &quot;item&quot;'>
                       <div id='related-posts'>
                      <h4>
                       Bài cùng chủ đề:
                      </h4>
                     <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=10;
                      removeRelatedDuplicates();
                      printRelatedLabels(&quot;<data:post.url/>&quot;);
                    </script>
                      </div>
                        <div style='clear:both'/>
                      </b:if>
                      <!-- Bài liên quan End -->
Trong đó:
var maxresults=10; là số bài được hiển thị
Chúc thành công!
Publis: 

3 comments

  1. Bạn ơi cho mình hỏi blog của mình related post có 6 mục với hình ảnh và tiêu đề được chia làm 2 cột, nhưng mình muốn giao diện trên mobile chỉ 1 cột thôi thì phải làm sao ? Cám ơn bạn !
    1. Thường người ta để 1 cột ở kích thước từ 360 trở xuống,nhưng tùy kiểu responsive của từng template mà giới hạn kích thước này có khác nhau đôi chút về trị số.
      Xem related posts của bạn họ để id(#) hay class(.) code ví dụ là class nên bạn liệu tùy sửa lại

      .related li,.related-thumb,.related li .related-img
      {width:100%;min-height:auto;margin-right:0;margin-bottom:10px}
      .related-thumb,.related li .related-img{height:180px}

      Code là thế nhưng còn phụ thuộc code related post của bạn ko thể bê nguyên thế vào được.
    2. Do mình không phải là dân IT nên tự mày mò thôi, mua template của trang soratemplate nó nói là support unlimited, mà minh hỏi nó cái gì thì nó cũng bảo mình xem document mà có thấy gì đâu, lên trang của nó thì thấy người ta cũng than phiền tùm lum về template của nó, 1 bài học trả phí chưa chắc tốt. Dù sao cũng cám ơn bạn đã hướng dẫn !
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji