Nếu bạn là một người sử dụng Blogger lâu ngày, bạn sẽ thấy hầu hết các js hỗ trợ Auto Readmore hiện nay đều sử dụng css để căn chỉnh kích thước của ảnh thumbnail được hiện ở trang chủ, và điều này làm cho hình ảnh bị biến dạng. Qua nhiều thủ thuật trước đây mình chia sẻ về các thủ thuật với ảnh tải lên ở Blogger cũng như Picasa:
Cuối cùng mình đã tổng hợp cả thủ thuật trên và viết ra được một đoạn js hoàn chỉnh giúp resize và cắt ảnh đúng kích thước không làm biến dạng hình ảnh. Lần này không chỉ ra hình vuông nữa mà mọi kích thước bạn mong muốn.
Resize và cắt ảnh thumbnail đúng kích thước cho Blogger
Sử dụng đoạn js này rất đơn giản, bạn tim đến trước thẻ </body> và thêm đoạn mã sau vào
<!--KslZone Auto Picasa Image Resize Script Started-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'><
<script type='text/javascript'>//<![CDATA[
var _0x9d21=["\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6D\x67","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x6C\x65\x6E\x67\x74\x68","\x73\x72\x63","\x73\x31\x36\x30\x30","\x77","\x2D\x68","\x2D\x63","\x72\x65\x70\x6C\x61\x63\x65"];function resizeThumb(_0xb158x2,_0xb158x3,_0xb158x4){var _0xb158x5=document[_0x9d21[0]](_0xb158x2),_0xb158x6=_0xb158x5[_0x9d21[2]](_0x9d21[1]);for(var _0xb158x7=0;_0xb158x7<_0xb158x6[_0x9d21[3]];_0xb158x7++){_0xb158x6[_0xb158x7][_0x9d21[4]]=_0xb158x6[_0xb158x7][_0x9d21[4]][_0x9d21[9]](_0x9d21[5],_0x9d21[6]+_0xb158x3+_0x9d21[7]+_0xb158x4+_0x9d21[8]);} ;} ;
resizeThumb("Blog1",200,140);
//]]></script>
</b:if></b:if>
<!--KslZone Auto Picasa Image Resize Script Started-->
Thay thế 200 bằng chiều rộng và 140 thành chiều cao của ảnh thumbnail mà bạn mong muốn. Lưu lại template và kiểm thử!
0 nhận xét:
Đăng nhận xét