Hướng dẫn cách sử dụng Video làm Thumbnail trong Blogspot / Blogger.
Hiện nay có khá nhiều các bạn làm web chia sẻ nhạc và video. Tuy nhiên, có một khó khăn chung mà chưa giải quyết được đó chính là lấy video trong bài viết ra làm thumbnail trên trang chủ hay gọi là Video làm Thumbnail. Hoặc nếu có thì phải dùng tới JS để lấy link video từ trong nội dung bài viết ra. Như vậy sẽ làm ảnh hưởng tới tốc độ tải trang.
Hôm nay, mình sẽ tiếp tục hướng dẫn các bạn tận dụng tính năng của Enclosure Links trong Blogspot. Với cách này thì chúng ta sẽ không phải sử dụng JS để get video trong bài viết. Và khả năng tùy chỉnh lại cao nữa 🙂
Các bước thực hiện
Bước 1: Kích hoạt Enclosure Links
Mở menu Settings -> Other. Tại phần Enable Title Links and Enclosure Links chuyển từ No thành Yes. Xem lại bước 1 trong bài viết Tùy chọn Thumbnail theo ý thích cho Blogspot để rõ hơn 🙂
Bước 2: Sử dụng Enclosure Links làm Thumbnail
Được rồi, bây giờ các bạn copy đoạn code dưới và thay cho code Thumbnail hiện tại của Theme nhé.
<b:if cond='data:blog.pageType == "index"'> <b:loop values='data:post.enclosures' var='enclosure'> <b:if cond='data:enclosure.mimeType == "video"'> <div class='videobox'> <iframe width="560" height="315" expr:src='data:enclosure.url' frameborder="0" allowfullscreen=''></iframe> </div> </b:if> </b:loop> </b:if>
Bước 3: Thêm CSS
Ở bước này chúng ta sẽ thêm một chút CSS để video có thể tương thích với các màn hình khác nhau.
.videobox {
position: relative;
padding-bottom: 75%;
overflow: hidden;
}
.videobox iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
Bước 4: Cách thêm khi post bài
Khi post bài, các bạn hãy để ý tới phần Enclosure Links nhé. Tại ô Add link thì các bạn nhập link của video, còn ô Add mime type thì các bạn nhập là video.
Tổng kết
Rất đơn giản phải không, nếu áp dụng tốt các thẻ điều kiện nữa thì chúng ta sẽ có được bộ code chức năng thumbnail cho Blogspot khá là bá đấy :D. Chúc các bạn thành công với hướng dẫn Video làm Thumbnail.
Nếu thấy Blog của mình hữu ích hãy chia sẻ nó tới bạn bè của mình và cũng đừng quên theo dõi blog qua email nữa nhé! Và đừng quên cho mình 5 sao nếu thấy bài viết hữu ích đấy 🙂
ConversionConversion EmoticonEmoticon