Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot - 123itvn.com


Cộng đồng vui bựa status Tham gia đê
(Góc kiếm tiền online)
Bạn rảnh rỗi, thường xuyên online và muốn tăng thêm thu nhập từ 1 triệu mỗi tháng ? Tham gia Clixsense ngay để biến mong muốn thành hiện thực nhé >>> XEM CHI TIẾT.

Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot


Với thủ thuật này, việc biến ảnh thu nhỏ (thumbnail) từ video trên youtube thành ảnh thu nhỏ của bài viết với blogger sẽ trở nên dễ dàng hơn bao giờ hết.


Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot
Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot

Mục tiêu


Bài viết của mình chỉ có duy nhất 1 video từ youtube, ngoài ra không chứa bất cứ hình ảnh nào khác. Trong khi đó, template hiện tại lại không hỗ trợ việc hiển thị ảnh đại diện (thumbnail) với nội dung từ video. Mình sẽ phải tìm cách nào đó để biến từ không thể thành có thể. Okie men :)

Yêu cầu
- Sao lưu template blogspot trước khi thao tác.
- Code template đã có dòng lệnh hỗ trợ javascript.



Code tự động lấy ảnh


<script type='text/javascript'>
var lk = '<data:post.thumbnailUrl/>';
var td = '<data:post.title/>';
//<![CDATA[
document.write('<img class="anhyoutube" src="'+lienket+'" title="'+tieude+'" alt="'+tieude+'"/>');
//]]>
</script>

Với đoạn mã này, ảnh thumbnail của video trên youtube sẽ được blogspot tự động lấy làm thumbnail cho bài viết. Bạn chỉ việc copy - paste nó vào vị trí cần thiết trong template là okie. Nói đơn giản vậy thôi còn trên thực tế cũng khoai đấy :))

Mỗi template được viết code rất khác nhau, nếu quản trị viên không nắm vững về các thẻ HTML, mã CSS, JavaScript ... thì việc hiển thị thumbnail sẽ trở nên khó khăn bởi đoạn code do mình cung cấp chỉ là phần cơ bản. Để ảnh thumbnail hiển thị đẹp, phù hợp với giao diện thì anh em cần tùy chỉnh thêm về CSS. Class của hình ảnh này là anhyoutube nhé.

Và đây là cách chèn code của mình - dưới góc nhìn của 1 người không chuyên. Hi vọng anh em có thể hiểu rõ hơn và áp dụng phần nào vào teamplate. Chúc thành công !


Sử dụng code trong blogspot


Lúc đầu, trang hiển thị bài viết theo Nhãn (Label) chưa hề có ảnh đại diện. Để thumbnail xuất hiện,  mình cần làm 3 việc sau đây :
1. Tìm class áp dụng cho label trong template.
2. Chèn code tự động lấy ảnh vào đó.
3. Tùy chỉnh CSS.

Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot
Ban đầu, chưa có ảnh

Bước 1 :  Tìm class (lớp) hoặc id 


Rõ ràng là mình không thể lần mò để tìm code label trong template bởi việc này sẽ tốn khá nhiều thời gian. Một cách làm khác đơn giản hơn là tìm kiếm gián tiếp thông qua trình duyệt.
- Chuột phải vào bài viết đầu tiên, chọn Kiểm tra (với Cốc Cốc, Chrome) hoặc Kiểm tra phần tử HTML (với Firefox) ...

Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot
Kiểm tra mã nguồn

- Bằng cách này, trình duyệt sẽ hiển thị đoạn mã HTML + CSS của đối tượng. Mình chỉ việc tìm class  đang được áp dụng cho bài viết ở trang Label mà thôi.
Sau khi xem xét, có thể kết luận thẻ <div> với class="post" chính lớp mình cần tìm (3 khung khoảnh đỏ). Okie, xong bước 1.

Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot
Đã tìm được class tương ứng

Bước 2 : Xác định vị trí của class hoặc id trong template


- Đăng nhập vào blogger. Bên menu trái, chọn Chủ đềChỉnh sửa HTML.

Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot
Mở phần chỉnh sửa HLMT trên blogger

- Đưa con trỏ chuột vào phần chứa nội dung template.
- Nhấn tổ hợp phím Ctrl + S để mở hộp tìm kiếm, sau đó nhập chính xác tên của đối tượng tìm được ở bước 1 mà cụ thể là class 'post'.

Lưu ý
- Bạn có thể nhập từ khóa là 'post' (ngoặc đơn) hoặc "post" (ngoặc kép) để hệ thống tìm được kết quả phù hợp (điều này phụ thuộc code trong template).
- Nếu template có nhiều class tên 'post' thì bạn phải tìm đúng class dùng cho việc hiển thị ở bước 1. Mình còn test lại bằng cách thêm thử 1 số ký tự vào dòng tiêu đề (H2). Lưu template lại, F5 xem tiêu đề trên web có thay đổi không cơ :))

Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot
Tìm đến class trong template

- Tìm đến thẻ <data:post.body/> bởi trong blogspot thì thẻ này luôn dùng để hiển thị nội dung bài viết. Sau đó paste đoạn mã tự động lấy ảnh vào ngay phía sau.

Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot
Chèn đoạn mã vào sau <data:post.body/>

Bước 3 : Chỉnh sửa CSS


Lưu template. F5 xem website đã hiển thị đúng ảnh thumbnail cho bài viết chưa ?
Kết quả là ảnh đại diện đã có, nhưng nó xuất hiện cùng clip nữa. Việc tiếp theo là phải ẩn clip đi. Cũng làm tương tự như bước 1, tìm đến class của video sau đó thêm thuộc tính CSS {display:none} là xong.

Tự động lấy ảnh thumbnail từ video youtube làm thumbnail trên blogspot
Giao diện hiển thị sau khi thêm đoạn code

Lời kết


Thật sự không dễ dàng gì để anh em có thể tối ưu ảnh thumbnail cho bài viết được lấy từ ảnh thumbnail của video youtube. Chia sẻ của mình cũng chỉ là áp dụng cho template mà mình đang sử dụng. Rất mong nhận được thêm nhiều sự đóng góp của các bạn để bài viết hoàn thiện hơn.
Cảm ơn :)


Từ khóa tìm kiếm :

  • lấy ảnh đại diện youtube làm thumbnail blogspot
  • biến thumbnail video youtube thành thumbnail blogspot
  • lấy ảnh đại diện cho bài viết từ thumbnail youtube
  • tự động tạo thumbnail cho blogger từ video youtube

Có thể bạn sẽ thích

Bình luận !