Tạo thumb cho bài đăng phổ biến
Thứ Ba, 24 tháng 4, 2012
" Ức chế quá với cái thumb, bé tý xíu thế này, xấu thật... "
Đã bao giờ bạn phải thốt lên như thế này chưa. Định dạng mặc định của ảnh trong Blog và PopularPosts là 72x72. Nhiều bạn không thích với định dạng này nhưng vẫn phải cố sử dụng như một sự ép buôc. Nhưng nếu dân tình kêu ca nhiều thì chắc Google cũng phải nghĩ đến giải pháp cho một cái biến ảnh ban đầu. Chờ thì hơi sốt ruột.
Mình đã tìm ra một quy luật rất hay muồn chia sẻ cùng các bạn, nếu các bạn để ý link thumb này sẽ có định dạnh như sau.
Hãy chú ý đến phần mình bôi đỏ, đó chính là định dạng mà Google quy định. Nếu bạn thay thử các con số khác vào số 72 ta sẽ được các hình ảnh tương ứng với kích cỡ đó. Và nó là hình vuông.
Kích thước tối đa là 2000px.
Từ đó mình viết lên một hàm convertThumb có chức năng tương ứng createSummaryAndThumb, sử dụng thì chắc không khó. Áp dụng với cả 2 widget mà Blogspot đã cho. Mình nghĩ ưu điểm của hàm này so với hàm của các Blogger nước ngoài sẽ nhanh và tốt hơn.
Hàm convert :
function converthumb(img,s,w,h,url,tit){
if(Number(s) > 2000){s = 2000;}
img = img.replace(/s72/gi,"s"+s+"");
if(url != "" || tit != ""){
data = '<img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/>';
}else{
data = '<a href="'+url+'" rel="'+tit+'"><img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/></a>';
}
document.write(data);
}
Các biến truyền vào :
Sử dụng
- Đầu tiên bạn copy và save với định dạng file convert.js sau đó up lên host nào đó.
1. Blog
VD: mình muốn lấy ảnh 800, rộng 300, cao 250
<b:if cond='data:post.thumbnailUrl'>
<script>
converthumb("<data:post.thumbnailUrl/>","800","300","250","","<data:post.title/>");
</script>
<b:else/>
<img src="http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg" width="300" height="250"/> <!-- nếu không có thumb sẽ hiển thị ảnh này -->
</b:if>
2. PopularPosts
Tương tự:
<b:if cond='data:post.thumbnail'>
<script>
converthumb("<data:post.thumbnail />","800","300","250","","<data:post.title/>");
</script>
<b:else/>
<a class='poster' expr:rel="data:post.title" expr:href='data:post.href'>
<img expr:alt="data:post.title" border='' height='250px' src='http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg' width='300px'/>
</a>
</b:if>
Theo yêu cầu của netdohoa.com
Chúc các bạn thành công !
Đã bao giờ bạn phải thốt lên như thế này chưa. Định dạng mặc định của ảnh trong Blog và PopularPosts là 72x72. Nhiều bạn không thích với định dạng này nhưng vẫn phải cố sử dụng như một sự ép buôc. Nhưng nếu dân tình kêu ca nhiều thì chắc Google cũng phải nghĩ đến giải pháp cho một cái biến ảnh ban đầu. Chờ thì hơi sốt ruột.
Mình đã tìm ra một quy luật rất hay muồn chia sẻ cùng các bạn, nếu các bạn để ý link thumb này sẽ có định dạnh như sau.
VD : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghISz4Kl14U429X55SqLQZSGbm0c-r4MOBukAUohyphenhyphenl0i7AD9HRSfKFw68Xvm_cr8YD_tnx8BHtJDmyaA1zeX-GpPxml5diVNwnLvO0YkbSy2OW_srIWSjFo-TcRWGdWWGyofr2za9nIIo/s72-c/xem-phim-Giay+thuy+tinh-maphim.net.JPG
Hãy chú ý đến phần mình bôi đỏ, đó chính là định dạng mà Google quy định. Nếu bạn thay thử các con số khác vào số 72 ta sẽ được các hình ảnh tương ứng với kích cỡ đó. Và nó là hình vuông.
Kích thước tối đa là 2000px.
Từ đó mình viết lên một hàm convertThumb có chức năng tương ứng createSummaryAndThumb, sử dụng thì chắc không khó. Áp dụng với cả 2 widget mà Blogspot đã cho. Mình nghĩ ưu điểm của hàm này so với hàm của các Blogger nước ngoài sẽ nhanh và tốt hơn.
Hàm convert :
function converthumb(img,s,w,h,url,tit){
if(Number(s) > 2000){s = 2000;}
img = img.replace(/s72/gi,"s"+s+"");
if(url != "" || tit != ""){
data = '<img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/>';
}else{
data = '<a href="'+url+'" rel="'+tit+'"><img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/></a>';
}
document.write(data);
}
Các biến truyền vào :
- img là link của các biến sau : data:post.thumbnailUrl (Blog), data:post.thumbnail (PopularPosts)
- s : kích thước bạn muốn convert từ 72 sang.
- w : chiều rộng của ảnh được hiển thị.
- h : chiều cao của ảnh được hiển thị.
- url : là link truyền vào data:post.href (PopularPosts), data:post.url (Blog)
- tit : tiêu đề truyền vào data:post.title (cả 2)
- s : kích thước bạn muốn convert từ 72 sang.
- w : chiều rộng của ảnh được hiển thị.
- h : chiều cao của ảnh được hiển thị.
- url : là link truyền vào data:post.href (PopularPosts), data:post.url (Blog)
- tit : tiêu đề truyền vào data:post.title (cả 2)
Sử dụng
- Đầu tiên bạn copy và save với định dạng file convert.js sau đó up lên host nào đó.
1. Blog
VD: mình muốn lấy ảnh 800, rộng 300, cao 250
<b:if cond='data:post.thumbnailUrl'>
<script>
converthumb("<data:post.thumbnailUrl/>","800","300","250","","<data:post.title/>");
</script>
<b:else/>
<img src="http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg" width="300" height="250"/> <!-- nếu không có thumb sẽ hiển thị ảnh này -->
</b:if>
2. PopularPosts
Tương tự:
<b:if cond='data:post.thumbnail'>
<script>
converthumb("<data:post.thumbnail />","800","300","250","","<data:post.title/>");
</script>
<b:else/>
<a class='poster' expr:rel="data:post.title" expr:href='data:post.href'>
<img expr:alt="data:post.title" border='' height='250px' src='http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg' width='300px'/>
</a>
</b:if>
Chúc các bạn thành công !
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
Comments[ 0 ]
Đăng nhận xét