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.

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.

Để 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!!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait