[FIXED] Tạo Bài VIết Liên Quan 3 cột 6 bài viết tuyệt đẹp cho Blogspot

#Thủ Thuật #Windows #Blogger #Facebook

[FIXED] Tạo Bài VIết Liên Quan 3 cột 6 bài viết tuyệt đẹp cho Blogspot

Share:
Chào các bạn, trước đây mình đã giới thiệu đến các bạn mẫu Related Post (bài viết liên quan) cho Blogspot. Tuy nhiên mình nhận được nhiều phản hồi từ mọi người rằng nó không hoạt động, không hiện bài viết !?
Vì vậy bài viết này mình sẽ chia sẻ lại code mình đã fix. Xem bài viết cũ tại đây: Click here!
Đây là mẫu bài viết liên quan khá đẹp do mình thiết kế, bố cục gồm 3 cột 2 hàng 6 bài viết, có responsive tương thích với các thiết bị thông minh (smartphone, tablet,...).

Cách thực hiện

Bước 1. Truy cập trang chỉnh sửa Theme của Blogspot.
Bước 2. Chèn đoạn code này phía trên thẻ </head> trong template.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>.block-title{border-bottom:1px solid #c5c5c5;position:relative;top:-30px;margin:0}
.block-title h5{font-family:&quot;Roboto&quot;,sans-serif;font-size:22px;font-weight:500;line-height:60px;color:#555;text-align:left;margin:0}
.block-title h5 span{display:inline-block;*display:inline;zoom:1;position:relative;top:30px;padding:0 10px 0 0}
.bg-white{background-color:#fff!important}
#entry-header{margin:10px 0 0 0;padding:10px 0 0 0;border-top:1px solid #eee;border-bottom:0}
#related-posts{float:left;width:100%;margin:0 0 10px 0;background:#fff}
#related-posts a{margin:0;padding:10px 0 0 10px;background:#fff}
#related-posts a:last-child{padding:10px}
#related-posts .related_img{object-fit:cover;width:266.33333333px;margin:0 1px;height:120px;border-radius:0;padding:0}
#related-title{color:#666;text-align:center;padding:0;font-size:18px;font-weight:400;line-height:1.45;width:266.333333px;transition:all .2s;margin-top:5px;min-height:80px}
#related-posts a:hover #related-title{color:#66689c}
#related-posts h5{padding:10px;background:#fff;color:#666;font:400 20px Roboto;margin:0;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;letter-spacing:-.2px}
#related-posts:hover h5{background:#66689c;color:#FFF}
.related-posts-more{position:absolute;width:267px;height:120px;background:#333 url(//4.bp.blogspot.com/-SDiaGMyrAAM/WEF-onfl5fI/AAAAAAAABbc/2DQ3OSgdhL8JFrH5OKU8pFh9-eh6shchQCLcB/s45/search-icon.png) no-repeat center center;opacity:0;transition:.35s}
#related-posts a:hover .related-posts-more{opacity:.5}
</style>
<script type='text/javascript'>
//<![CDATA[
// Related Post by BACSIWINDOWS.COM
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://2.bp.blogspot.com/-BdZahr9Qwy4/WNXhN6hOUxI/AAAAAAAAAJk/_7cC82z3NfEVQ-drE0LqiJCgl-1OgkbnwCLcB/s94/Logo-Bac-Si-Windows.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,100)+"";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0);document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;float:left');if(i!=0)document.write('"');else document.write('"');document.write(' title="'+relatedTitles[r]+'" href="'+relatedUrls[r]+'"><span class="related-posts-more"></span><img class="related_img" src="'+thumburl[r]+'"/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]></script>
</b:if>
Bước 3. Chèn đoạn code này vào nơi bạn muốn hiển thị Related Post (phía trên khung bình luận hoặc cuối bài viết).
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- related posts begin -->
<div id='related-posts'>
<h5><i class='fa fa-tags' style='margin:0 5px 0 0'/>BÀI VIẾT CÙNG CHUYÊN MỤC</h5>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Bài viết cùng chuyên mục:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
<!-- related posts end -->
<a class='bot-ads' href='//www.bacsiwindows.com/template' target='_blank' title='Xem chi tiết'><img src='//3.bp.blogspot.com/-CBDhsYF4Fy0/WNosvIMAkFI/AAAAAAAAAMk/Wz3GqmEttzkYaZy1i1SeEFYDuPEPLuPFACLcB/s850/Bac-Si-Windows-Responsive-Blogspot-Theme-ADS-Bacsiwindows-dot-com.jpg' style='margin:0 0 5px 0' width='100%'/></a>
</b:if>

Lời kết

Đây là mẫu Related Post khá đẹp và đơn giản, phù hợp với hầu hết các thể loại Blog. Nếu thích, bạn có thể chỉnh sửa lại một chút CSS để cho phù hợp với phong cách của bạn nhé! Chúc thành công.
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.