Thư viện

Trải nghiệm

Chủ Nhật, tháng 10 13, 2013

Tăng độ phân giải ảnh thumbnail của blogger

Nâng cao chất lượng ảnh thumbnail của tiện ích readmore, popularpost, bloglist, blog1,.... cho blogspot

Chia sẻ:
Như các bạn đã biết thì ảnh thumbnail mặc định của blogger là 72x72 px. Do vậy nếu bạn tăng kích thước của ảnh thì ảnh sẽ sảy ra hiện tượng vỡ hạt nhìn rất mất thẩm mỹ cho trang của bạn. Bài viết này mình sẽ hướng dẫn các bạn cách để có thể tăng chất lượng của ảnh thumbnail cho một số tiện ích của blogger như Silder bloglist, Readmore không dùng Javascripts, Popularposst,....
Tăng độ phân giải ảnh thumbnail của blogger

 ¤ Bước 1. Thêm Featured Posts metro slider cho blogspot/ blogger!

1.1- Đăng nhập vào blog
1.2- Chọn Mẫu (Template)
1.3- Chọn chỉnh sủa HTML (Edit HTML)
1.4- Dán 1 trong 2 đoạn code sau trước thẻ </body> :
1.4.1. Đoạn code 1:
<script type='text/javascript'>                 
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("BlogList1",150);                 
</script>
- Trong đó
  • BlogList1 là Id của tiện ích bạn muốn thay đổi kích thước ảnh thumbnail. bạn có thể thay đổi bằng Id tiện ích khác ví dụ bài viết readmore không dùng javascripts là Blog1. Bài đăng phổ biến là Popularpost1.
  • 150 là kích thước của ảnh thumbnail. Ở đây chiều rộng và chiều cao bằng nhau và cùng bằng 150x150 px.
1.4.2. Đoạn code số 2:
Như các bạn biết đoạn code trên lấy ảnh thumbnail có kích thước là 72x72 px do vậy hình ảnh to thường sẽ bị mờ để khắc phục bạn có thể dán đoạn code bên dưới vào trước thẻ </body>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("BlogList1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c\//gi, "");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
 Trong đó Bloglist1 là ID của tiện ích vừa thêm ở trên.

Để resite thêm ảnh ở một tiện ích khác ví dụ tiện ích Popularpost bạn có thể sửa đoạn code như sau:
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("BlogList1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c\//gi, "");
bodyText.innerHTML = theText;
bodyText2 = document.getElementById("PopularPosts1");
theText2 = bodyText2.innerHTML;
theText2 = theText2.replace(/s72-c\//gi, "");
bodyText2.innerHTML = theText2;
}replaceText();
//]]>
</script>
Chúc các bạn thành công.

7 nhận xét:

  1. Rất hay. Tks nhiều!
    À mà có thể dùng script để show đc label ra Popular ko ta? :D

    Trả lờiXóa
    Trả lời
    1. ý bạn là thêm tên nhãn của bài viết đó ra tên nhãn phải không. Hay là chỉ hiện thị tiêu đề bài viết của một nhãn nhất định ra tiện ích Popularposts/ Bạn có thể nói rõ để được hỗ trợ chi tiết nha bạn.

      Xóa
    2. Là show labelname ra ngoài ở popularpost đó b :D

      Xóa
  2. Nam cho mình hỏi là nếu mình có 1 số code không có id thì sao nhỉ ? Tại mình tìm trên mạng 1 số code bài viết ngẫu nhiên có thể chèn bất cứ nơi nào trên blog mà không có id nên không thể dùng code của Nam đc. Link bài đây nhé, đây ko phải blog của mình nên đừng hiểu lầm nhé http://www.videocach.com/2014/02/random-post-nam-ngang-co-thumbnail-anh.html

    Trả lờiXóa
  3. Cái template của mình ở phần Latest Posts thì chất lượng ảnh tốt còn mấy cái còn lại chất lượng ảnh bị giảm đi là sao?
    http://i.imgur.com/AlwLrzA.png

    Trả lờiXóa
  4. Namkna cho mình hỏi là tại sao blog saotop.com của mình, sao ảnh tải lên thì lại bị nhòe và xấu còn ảnh coppy trực tiếp vào thì không sao? Vậy nếu muốn điều chỉnh thì làm thế nào? Mong được chỉ giúp. Thank you!

    Trả lờiXóa
  5. Bạn ơi, cho mình hỏi , thủ thuật trên chỉ áp dụng cho hình ảnh từ picassa của blogger thôi fai ko ạ ? còn hình ảnh lấy từ photobucket, có áp dụng được ko ? vì ảnh thumbnail của trang label web mình cũng mờ quá , thanks !

    Trả lờiXóa