Bài viết liên quan Hỗ trợ Hình ảnh của bên thứ ba

   Theo một số trang tin tức nước ngoài mà mình tìm hiểu thì hình ảnh Blogger bị lỗi hiển thị là do bị ISP chặn vì phát hiện spam. Vì vậy Blogger đã thay đổi vùng lưu trữ hình ảnh vốn có trong miền bp.blogspot.com thành blogger.googleusercontent.com. Vấn đề xảy ra là URL mới của hình ảnh Blogger không hoặc chưa hỗ trợ hình thu nhỏ trên một số Template. Do đó, nhiều blog không hỗ trợ hình ảnh của bên thứ ba không xuất hiện (hoặc bị mờ) hình ảnh thu nhỏ trên trang chủ, các bài đăng phổ biến, bài đăng liên quan và các tiện ích blogger khác sử dụng hình thu nhỏ Blogger. Trước đây tiện thể viết bài mới, mình có quay lại một clip ngắn về cách xử lý để chia sẻ cho bạn nào chưa biết.

   Bài này mình chia sẻ với các bạn một tiện ích bài viết liên quan, được chỉnh sửa dựa trên code widget bài viết liên quan cũ thành HTML5 hỗ trợ hình ảnh được lưu trữ trên lưu trữ khác ngoài bp.blogspot.com chẳng hạn như lưu trữ hình ảnh Blogger mới nhất, hoặc các trang khác.

   Bài đăng liên quan này sử dụng định dạng lưới 2 hàng và 3 cột như hình trên, hoặc các bạn có thể xem demo trực tiếp tại Web mà mình đã áp dụng. Để thực hiện, các bạn làm theo 2 bước như sau.

Bài đăng liên quan Hỗ trợ Hình ảnh của bên thứ ba

   Bước 1: Thêm CSS

Các bạn vào trang quản trị Blogger -> Chủ Đề -> Chỉnh sửa HTML. sau đó copy và dán phần CSS bên dưới vào trước thẻ ]]></b:skin> hoặc thay vào CSS bài viết liên quan có sẵn của Template.

/*------------------------------------------*/

/*Bài viết liên quan ntlruby.com*/

/*-----------------------------------------*/

#related-posts .judul{margin:10px 0;font-size:20px;font-weight:500;padding:0;color:#333}

#related-posts .related_item{margin:0 10px 10px 0;display:block;float:left;width:calc(33.333333% - 10px);height:auto;}

#related-posts .related_items,#related-posts .related_item:nth-of-type(4n+0),#related-posts .related_item .clear{clear:both;}

#related-posts .related_items{margin-right:-10px;}

#related-posts .url_item{display:block;text-decoration:none;}

#related-posts .img_item {display:block;margin-bottom:5px;padding:0;width:100%;height:auto;transition:all 400ms ease-in-out;}

#related-posts .related_item:hover .img_item{opacity:.7;}

#related-posts .title_item{display:block;padding-right:10px;text-align:left;margin:0;color:#000;font-weight:400;line-height:1.1;transition:all 400ms ease-in-out;}

#related-posts .related_item:hover .title_item{color:#555;}

@media screen and (max-width:425px){

#related-posts .related_item{width:calc(50% - 10px);}

#related-posts .related_item:nth-of-type(4n+0){clear:none;}

#related-posts .related_item:nth-child(odd){clear:both;}

}

@media screen and (max-width:375px){

#related-posts .related_item{width:100%;}

#related-posts .related_items{margin-right:0;}

#related-posts .related_item:nth-child(odd){clear:none;}

}

   Bước 2: Đặt bài viết liên quan

Tiếp theo, các bạn copy và dán đoan code bên dưới vào vị trí muốn bài viết liên quan hiển thị, hoặc thay vào code bài viết liên quan có sẵn.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<script>

//<![CDATA[

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.replace(/.*?:\/\//g, "//")}else thumburl[relatedTitlesNum]='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC'}if(relatedTitles[relatedTitlesNum].length>300)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,300)+"";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 class="judul">'+relatedpoststitle+'</div>');document.write('<div class="related_items"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<div class="related_item"><a class="url_item');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'" title="'+relatedTitles[r]+'"><img class="img_item" alt="'+relatedTitles[r]+'" width="16" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" height="9" loading="lazy"/><div class="clear"></div><div class="title_item">'+relatedTitles[r]+'</div></a></div>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('<div class="clear"></div></div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}

//]]>

</script>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'/>

<script>

var RelatedLabel = &quot;<data:label.name/>&quot;;

    RelatedLabel = encodeURIComponent(RelatedLabel.trim());

(function(){var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, &#39;/feeds/posts/default/-/&#39; + RelatedLabel + &#39;?alt=json-in-script&amp;orderby=updated&amp;callback=related_results_labels_thumbs&amp;max-results=8&#39;);document.write(script.outerHTML)})();

</script>

</b:loop>

<script>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=6;

var relatedpoststitle=&quot;Bài viết liên quan:&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div></b:if>

   Lưu template lại và kiểm tra kết qua.

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