Thứ Tư, 2 tháng 10, 2019

Hướng dẫn thay đổi kích thước hình ảnh trên trang chủ Blogspot

Posted By: chu hong phong 23:21 Leave a Reply

Như các bạn cũng thấy, Với Template mặc định của Blogger hay là 1 số Template được chia sẻ trên mạng thì hình ảnh Thumbnail của bài viết 1 là sẽ có kích thước ảnh là 72×72 hoặc sẽ là full kích thước của ảnh luôn. Như vậy thì khá là bất tiện và thân thiện với trang web của chúng ta.

Chúng ta đang loay hoay trong việc chỉnh sửa CSS để làm sao cho nó thật đẹp thật vừa vặn? Nhưng tiếc là nếu thumbnail có kích thước là 72×72 thì chẳng thể nào làm nó to lên được vì nếu cho giãn ra thì sẽ bị nhòe hình. Còn nếu là ảnh full thì load trang sẽ rất nặng về hình ảnh.

CÁCH THAY ĐỔI KÍCH THƯỚC HÌNH ẢNH TRÊN TRANG CHỦ BLOGSPOT

Vì vậy mình sẽ quyết định chia sẻ cho các bạn 1 đoạn js nhỏ để cắt hình ảnh theo ý thích của mình. Bạn hãy copy và chèn đoạn Javascript sau đây vào trên thẻ </head> và cảm nhận nhé!

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

    <script type='text/javascript'>

        // < ![CDATA[$(document).ready(function () {

            var w = 340;

            var h = 150;

            $('.secondary-post').find('img').each(function (n, image) {

                var image = $(image);

                image.attr({

                    src: image.attr('src').replace(/s\B\d{2,4}/, 'w' + w + '-h' + h + '-c')

                });

                image.attr('width', w);

                image.attr('height', h);

            });

        });

        //]] > 

    </script>