Không hiển thị ảnh trên blogspot, phải làm sao?

{tocify} $title = {Mục lục bài viết}

[tintuc]

Ảnh trên blogspot không hiển thị - điều này gây bất tiện cho người đọc/khách hàng khi truy cập vào blogger của bạn , ảnh hưởng khá lớn đến việc bán hàng qua mạng của bạn . Gặp lỗi này, bạn ý kiến không biết nguyên nhân từ đâu và cách khôi phục thế nào? Hôm nay, mình xin giải đáp và share 1 số cách sửa lỗi không hiển thị ảnh trên blogspot  để các bạn tìm hiểu thêm và áp dụng.

Nguyên nhân

• Xóa ảnh trên picasa site web .google.com hay Google+. Ảnh upload lên blogger  hay Google+ nó đều lưu trữ ở picasaweb .google.com, do đó xóa ảnh trên picasa website .google.com hay Google+ thì ảnh trên theme blog sẽ bị lỗi. Cách khắc phục duy nhất upload lại toàn bộ các ảnh đã bị xóa và thay link từng ảnh một
• Lỗi do nhà mạng chặn. Bất cứ đối tượng nào trong đường dẫn có chứa đuôi  blogger .com như tên miền, hình ảnh ... sẽ đều bị chặn.

Cách khắc phục

Có 3 cách, tùy vào từng trường hợp cụ thể, mọi người có thể chọn Một trong 3 cách để sử dụng nhằm giải quyết vấn đề Một cách nhanh nhất.

Cách 1: Chỉnh sửa thủ công

Khi up ảnh lên bài post , link ảnh sẽ có dạng*.bp.blogspot .com, các bạn chỉ cần chuyển bài post qua tab HTML rồi sửa link đó thành lh4.googleusercontent.com hoặc lh4.ggpht.com là được. Trong đó “*” là giá trị ứng từ 0 đến 9. Cách này sử dụng khi bài đọc của bạn có ít hình ảnh thôi nhé vì nó mất khá nhiều thời gian và công sức.

Cách 2: Sử dụng Javascript

Với cách này, link ảnh sẽ tự động chuyển về dạnglh4.googleusercontent.com  bạn sẽ không cần sửa thủ công từng ảnh Một .

Vào  blogspot  => Mẫu =>Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ . Sau đó dán đoạn mã Code sau ở phía trên thẻ  và lưu mẫu.

<script type='text/javascript'>

//<![CDATA[

var images = document.getElementsByTagName("img");

for(var i=0;i<images.length;i++) { images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com"); } //]]>

</script>

Cách 3: Sử dụng Jquery

         Cũng tương tự như cách 2, đây là 1 cách tự động khác.  mọi người copy đoạn code sau đây và dán vào trước thẻ  trong Template.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>

//<![CDATA[ $("body img").each(function () {$(this).attr("src", $(this).attr("src").replace(//[0-9]+(.bp.blogspot)?/, "/lh4.googleusercontent")) }); //]]>

</script>

Lưu ý: Nếu như trong template của các bạn đã khai báo thư viện Jquery rồi thì có thể bỏ đoạn sau đi nhé!

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">



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




[/tintuc]