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,....
¤ 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<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.
Nhận xét
Rất hay. Tks nhiều!
Trả lờiXóaÀ mà có thể dùng script để show đc label ra Popular ko ta? :D
ý 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óaLà show labelname ra ngoài ở popularpost đó b :D
XóaCá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?
Trả lờiXóahttp://i.imgur.com/AlwLrzA.png
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óaBạ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