Khắc phục ảnh bài viết liên quan bị mờ cho Blogspot/Blogger

 Chào bạn, nay Nguyen Ha xin hướng dẫn bạn khắc phục mục hình ảnh bài viết liên quan bị mờ trên  Blogspot. Theo nhiều trang thông tin nước ngoài mà mình nghiên cứu thì bức ảnh blogger bị lỗi hiển thị là bởi bị ISP chặn vì ghi nhận spam. Bởi vậy blogger đã được điều chỉnh vùng tích trữ bức ảnh vốn sở hữu trong miền bp.blogspot.com thành blogger.googleusercontent.com. Điều xảy đến là URL mới của hình ảnh blogger không hoặc chưa hỗ trợ  thu nhỏ hình ảnh trên một số template. Vì vậy,  nhiều blog không hỗ trợ giúp hình ảnh của bên thứ ba không xuất hiện ( hoặc bị mờ ) bức ảnh sẽ bị thu hẹp, bị mờ đi trên trang chủ, bài viết liên quan, bài đăng phổ biến, các tiện ích blogger khác sử dụng hình thu nhỏ Blogger.

Khắc phục hình ảnh bài viết liên quan bị mờ cho Blogspot/Blogger

Bài viết này mình xin 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. Để thực hiện, các bạn làm theo 2 bước như sau.

Khắc phục hình ảnh bài viết liên quan bị mờ cho Blogspot/Blogger

Cách khắc phục lỗi hình ảnh bài viết liên quan bị mờ

Các bước thực hiện:

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>

/*-Sửa hình ảnh bị mờ nguyenhablog.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.
/*-Sửa hình ảnh bị mờ nguyenhablog.com-*/
<b:if cond='data:blog.pageType == "item"'>

<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 != "true"'/>

<script>

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

    RelatedLabel = encodeURIComponent(RelatedLabel.trim());

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

</script>

</b:loop>

<script>

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

var maxresults=6;

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

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div></b:if>
Lưu template lại và kiểm tra kết qua.

Lời kết

Như vậy, mình đã chia sẻ với mọi người cách khắc phục hình ảnh bài viết liên quan bị mờ trên Blogger. Hi vọng nó mang lại hữu ích cho bạn, nếu có câu hỏi cũng như thắc mắc vui lòng comment xuống dưới. Chúc bạn thành công!


3 Nhận xét

Mới hơn Cũ hơn

Nhận xét Mới