Việc nhúng video từ
youtube vào Blogspot theo Tôi nghĩ là một việc vô cùng đơn giản, hầu như các
Blogger đều biết. Nhưng nếu các bạn thêm Video từ Youtube trực tiếp vào Blog mà
không nhờ các đoạn CSS tạo hiệu ứng thì các Video bạn nhúng vào Blog sẽ vô cùng
đơn điệu.
Đặc biệt là các Blog xem
Tivi online, Blog Phim hay đơn thuần là các Blog lưu trữ video cá nhân mà được
nhúng từ Youtube. Trong hướng dẫn này, tôi sử dụng một hình ảnh chứa khung Tivi
để nhúng các đoạn Video từ Youtube. Khi độc giả truy cập vào Blog của bạn sẽ
nghĩ rằng họ đang xem một chiếc Tivi ^^!
Đọc thêm:
☼ Giờ bắt đầu thủ thuật cùng
Windows2it.
Bước 1: Vào Blog => Mẫu
=> Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>.
Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin> và Lưu mẫu
lại.
.BloggerSpice-video-Share{background:url(http://4.bp.blogspot.com/-17ioTkYMmoI/UlDrP5WMLGI/AAAAAAAAE6c/ey2exFn_Mbk/s1600/BS+Monitor.png) no-repeat top center;height:458px;width:580px;padding-top:38px;padding-left:72px;;margin-left:30px}
Bạn nên tùy biến đoạn CSS này cho phù hợp
với cấu trúc code trong Blog của bạn <Đặc biệt là cấu trúc ở phần hiển thị nội
dung bài viết>
Bước 2: Nhúng (Chèn) Video từ Youtube
vào trong bài viết bằng cú pháp dưới đây.
<div class="BloggerSpice-video-Share"> <iframe allowfullscreen="" frameborder="0" height="283" src="//www.youtube.com/embed/kHj7fqbNaQw?feature=player_embedded" width="511"></iframe> </div>
☼ Tùy chỉnh:
·
Đường link bôi màu xanh bạn thay bằng đường
link video từ Youtube mà bạn muốn nhúng (Chèn) vào.
·
Phần bôi màu đỏ là chiều cao và chiều rộng
của đoạn Video từ Youtube khi bạn nhúng vào Blog.
·
Việc tùy biến khung (hình ảnh chứa khung
Tivi) chứa video bạn phải làm thủ công (Nghĩa là xác định trước chiều cao và
chiều rộng của khung)…Tóm tại vì mỗi Template khác nhau có cấu trúc Code khác
nhau. Vì lý do này đòi hỏi bạn phải có một ít kiến thức về tùy biến. Hơi khó hiểu
đúng nào ^^!
Dưới đây là DEMO Tôi đã tùy biến với các kích thước nhau các
bạn có thể tham khảo qua:
Chúc các bạn thành công !
Còn bạn muốn Support gì thì cứ để lại
comment @!
0 nhận xét:
Đăng nhận xét