Thay đổi kích thước thumbnail của blogspot

By admin – March, 8th 2014Thông thường, blogpost sẽ lấy hình ảnh đầu tiên của bài viết ra để làm thumbnail và nó sẽ có kích thước là một hình vuông. Trong các template mặc định, phần Popular Post sẽ có thumbnail là 72x72px. Blogspot không cho phép bạn thay đổi điều này, dù bạn có tìm trong phần Edit HTML.Tuy nhiên, đôi khi chúng ta muốn tạo một template riêng, với kích thước thumbnail riêng thì thật không đơn giản. Sau 1 hồi search trên Internet, tôi cũng đã tìm ra cách làm, và bạn có thể xem trang Bé Khỏe Bé Ngoan phần Popular Post bên phải :)Tôi đã làm điều đó như thế nào? Theo dõi nhé!

Hiểu về các kích thước hình ảnh trong Blogspot

Blogpost lưu trữ hình ảnh trong Picasa. Mỗi khi bạn upload 1 tấm ảnh trong Blogpost, Picasa sẽ tự động tạo ra 1 số kích thước khác và Blogspot sử dụng chúng để làm thumbnail. Dưới đây là 1 số ví dụ:

Đây là link đến thumbnail mặc định của bài viết Đồ dùng cho bé vào những ngày lạnh, với kích thước vuông 72px:

http://4.bp.blogspot.com/-_Hndb2uSsDw/UxroWn2DMVI/AAAAAAAAACo/IgvD0m6_ejc/s72-c/do-dung-cho-be-ngay-lanh.jpg

Nếu bạn thay đổi s72-c thành s500-c thì sẽ có một thumbnail vuông khác kích thước 500px:

http://4.bp.blogspot.com/-_Hndb2uSsDw/UxroWn2DMVI/AAAAAAAAACo/IgvD0m6_ejc/s500-c/do-dung-cho-be-ngay-lanh.jpg

Muốn xem hình ảnh kích thước mặc định ư? Hãy thay s500-c thành s1600:

http://4.bp.blogspot.com/-_Hndb2uSsDw/UxroWn2DMVI/AAAAAAAAACo/IgvD0m6_ejc/s1600/do-dung-cho-be-ngay-lanh.jpg

Chú ý rằng những link nào có “-c” thì hình ảnh đó sẽ có kích thước vuông. Nếu bạn muốn kích thước thường thì chỉ cần bỏ “-c” ra khỏi link. Con số 1600 bạn có thể thay bằng bất cứ số nào cũng đều ra được hình ảnh với chiều ngang mong muốn.

Thay đổi kích thước thumbnail

Để được kích thước thumbnail như mong muốn, về nguyên tắc, bạn chỉ cần load đúng link của hình ảnh là được. Tuy nhiên, các widget (Tiện ích) như Popular Post không cho phép chúng ta lựa chọn mà chỉ sử dụng kích thước 72px. Chúng ta cũng không thể can thiệp vào code của các widget đó, vì chúng chỉ thể hiện qua 1 dòng lệnh đơn giản: expr:src=’data:post.thumbnail’

Nhưng chúng ta vẫn còn 1 cách, đó là dùng javascript để đổi “mã” kích thước sau khi blogspot load đường link của hình ảnh. Cách làm như sau:

1/ Vào Template –> Edit HTML, tìm đến widget Popular Post.

2/ Gõ Ctrl+F (Cmd+F với Mac) và tìm dòng lệnh expr:src=’data:post.thumbnail’

3/ Thêm 1 class vào image tag, ví dụ: class=”resizethumbnail”

chinh-sua-kich-thuoc-thumbnail-trong-html-blogspot

4/ Tìm đến cuối của mã HTML, ngay trước </body> thêm những dòng lệnh sau:

<script type='text/javascript'>
$ (document).ready(function() {$ ('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});
</script>

Bây giờ các thumbnail đều đổi sang kích thước 500px. Còn nếu bạn muốn giữ tỉ lệ hình ảnh và chiều ngang 450px chẳng hạn:

<script type='text/javascript'>
$ (document).ready(function() {$ ('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's450' );});});
</script>

 

 

[vc_column_text]

Thông tin liên hệ

[/vc_column_text][vc_contacts address=”6 Lê Văn Việt, Hiệp Phú, Ho Chi Minh City, Việt Nam” phone=”+84 989 258 963″ email=”info@idichvuseo.com.vn”]

Thay đổi kích thước thumbnail của blogspot
Đánh giá bài viết

Tuyển dụng SEO

Việc làm thêm cho sinh viên Khu vực Làng Đại Học Thủ Đức

Việc làm thêm cho sinh viên Khu vực Làng Đại Học Thủ Đức lương từ 2-4 triệu mỗi ngày các em sẽ phải bỏ ra từ 2-4 tiếng và anh chỉ tuyển 4-6 bạn duy nhất không đa cấp không…
Đọc thêm
Xác nhận Maps

Dịch vụ SEO Địa Điểm – Dịch vụ SEO Google Maps #1 TPHCM (Hồ Chí Minh)

Dịch vụ SEO Địa Điểm - Dịch vụ SEO Google Maps #1 TPHCM (Hồ Chí Minh) với✅ thời gian từ 20 - 25 ngày/keywords/maps.✅ Đảm bảo 100% đạt top,✅ Phí từ 5 triệu VNĐ/Tháng/10 maps.✅ Dịch vụ xác nhận Google…
Đọc thêm
Tuyển dụng SEO

Tuyển dụng việc làm SEO tại TPHCM

Nhân Viên SEO Marketing - Mức lương 3 - 5 triệu Làm mới: 22/10/2016 Hạn nộp: 31/10/2016 THÔNG TIN TUYỂN DỤNG Tuyển dụng SEO Mức lương: 4 - 6 triệu ( Hoa Hồng > 10 triệu.... ) Kinh…
Đọc thêm
Công ty seo idichvuseo

Đào tạo SEO Master tại TPHCM – Tư vấn chiến lược SEO cho doanh nghiệp

iDichvuseo cung cấp dịch vụ tư vấn chiến lược SEO, đào tạo seo, Digital Marketing cho các doanh nghiệp và áp dụng ngay thực tế các công việc đang làm cho doanh nghiệp để phổ biến các kiến thức mới…
Đọc thêm
Dịch vụ seo tổng thể

Quy trình seo

Quy trình seo tổng thể bao gồm 6 bước: Tư vấn khách hàng xây dựng chiến lược SEO dành cho daonh nghiệp,Tối ưu hóa cấu trúc website,Tối ưu onpage,Lên chiến lược nội dung,Lên chiến lược quảng bá web,Chiến lược xây…
Đọc thêm
Top dịch vụ seo tại Việt Nam

Dịch vụ SEO Đà Nẵng uy tín chuyên nghiệp 0989 258 963

Dịch vụ seo Đà Nẵng iDichvuseo sẽ giúp bạn tiết kiệm thời gian, tối ưu lợi nhuận với phương pháp SEO tổng thể tại Đà Nẵng hoặc SEO từ khóa tại Đà nẵng tốt và đúng mục tiêu nhất.
Đọc thêm