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.
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) …
– 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.
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.
– Đư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ì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.
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.
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 :)
