Loading post navigation ...
 
 

Pro page

25
Nhận xét

Tạo thumb cho bài đăng phổ biến

| by Anh N.C | views

Hãy nhấn thanks để ủng hộ tác giả

" Ứ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.

VD : http://2.bp.blogspot.com/-aNmJv1T0OD8/T47tik6x-EI/AAAAAAAAAEw/_O8hvj2xbSM/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ử 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 !


Enter your mail address:

25

Tanchau123

Mở hàng :))
http://tanchau123.blogspot.com

Jack

Theo mình nghĩ thì thấy size ảnh như thế là được rồi... vì ảnh càng lớn càng load lâu sẽ làm chậm blog...
Thanks vì bài viết hay... ;)

Nguyễn Mạnh Tiến

Ủng hộ xếp :D
Thi xong phải vọc java mới đc :X

Tung Nguyen

Hay nhưng kén khách :D
Vì chỉ những themes như Demo mới sử dụng thumb lớn vậy, còn themes thường như ShareAllworld.info thì chỉ cần 72 là OK rồi.

Phạm Minh Tâm

( Thank blog for you great - http://www.vatinam.net )

tintuc24h

Quá được anc ạ! Like mạnh!

baby

Anh N.C viết tut về JavaScript đi :D mình ủng hộ hết mình :D

Tăng Doãn Du

Bó tay luôn. Có ai sử dụng được chưa chỉ t với.

Tăng Doãn Du

Sửa đi sửa lại vẫn ko đc có đúng 1 bài hiện ảnh, thậm trí là xóa đoạn java trên đi để mỗi hàm gọi ra mà cái bài đấy nó vẫn hiện được ảnh, như có ma ấy. =))

Tăng Doãn Du

Huhu! Ức chế ko làm sao được, đặt vào bài cũng chỉ đc 1 bài có ảnh, đặt vào popular cũng chỉ 1 bài có ảnh, thế là sao? Bác N.C chỉ giùm cái, cám ơn nhiều!

Anh N.C

Thứ nhất bạn xem lại chế độ cài đặt : 1 bài... hay nhiều hơn nhé.

Hoặc bạn đã đặt biến post trong loop ở hàm main chưa.. Chúc bạn thành công nhé !

Tăng Doãn Du

Cứ như cái này số bài lớn sẽ không được sao ấy, cùng 1 temp copy của nhau, cái test thì chạy mà cái chính thì lại không :(. Nản

Tăng Doãn Du

E cài thử nhỏ hơn 10 bài rồi, lớn hơn 10 cũng rồi, còn cái biến post trong loop ở hàm main chưa thì e ko rõ, bác chỉ giùm e với được ko?

Tăng Doãn Du

E để ý thì hàm converthumb chỉ được dùng một lần, chẳng hiểu sao lại vậy nữa, ở các bài khác chỉ hiện đoạn java còn hàm gọi ra thì ko thấy xuất hiện.

Tăng Doãn Du

Ôi cuối cùng cũng đc. Thanks bác, lỗi e của là dấu nháy ở src của img ko liền vào link. Nản. 800 bài giờ sửa thì mệt rồi :(

Tăng Doãn Du

A, tiện đây cho e hỏi làm thế nào để hiện được các nhãn ở tiện ích recent posts thế? Chỉ giùm e với. Thanks bác nhiều!

Thiên Long

Tuyển nhân viên chuyên Blogspot làm toàn thời gian hoặc CTV cũng được (Lương cơ bản 2,5 triệu) -> thử việc 3 ngày.

- Khả năng khá về Javascript
- Khả năng viết lách tốt là 1 lợi thế

(Xin liên hệ: yahoo chat: dacbietthuvi - 0945.891.891)

Xin lỗi chủ nhà vì tin này được đăng tại đây!

Sói Hoang

ghé thăm blog mình nhé! Mong được mọi người góp ý thêm http://xnhac.blogspot.com/

cao nguyen

bài viết rất là hữu ích. Mọi người cùng ghé thăm nhà mình nhé...http://www.i4tv.co.cc/

Sói Hoang

mời các bạn nghe Nhac Sàn, Nhạc Trẻ Mới, Nhạc Rap HOT, Clip ca nhạc mới, album hay

Quang Minh today

Rất hữu ích đấy! Mình cần cái này lâu ùi, hi hi.. Thank bạn nha!

Kumin

sao load phần ảnh avt comment lâu khủng khiếp anh ơi!

Anh N.C

@Tăng Doãn Du : Do bài đăng của bạn đấy, nếu bạn đi copy bài ở trang khác, ảnh sẽ không ở dạng link mà sẽ ở dạng data base64, làm cho dung lượng bài viết lớn, khiến js của blogger không lấy được, gây ra lỗi hiển thị.

Hoàng Chiến

Các bạn nên thay /s72/ thành /s72-c/ để ảnh hiện thị chuẩn hơn nha. cái này suzuki_aka quên chưa kiểm tra

Nguyên Hoàng

Làm Bằng Đại Học
Lam Bang Dai Hoc
Làm Bằng Đại Học Giá Rẻ
Làm Bằng Đại Học Tại Tphcm



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home