Chèn Video từ Youtube vào Blogspot trong khung Tivi

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:

● Tạo nút Button hiệu ứng nhảy cho Blogspot

● Thêm Pop Out Facebook, Google+, Twitter cho Blogspot (Blogger)

☼ 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 !

Backlink: Nâng cao hiệu quả sử dụng tài sản lưu động

Còn bạn muốn Support gì thì cứ để lại comment @!

• SHARES
• Share
• Tweet
• Share
• Pin
• Share

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!

Theo dõi tôi trên:

• 
• 
• 
• 
• 
• 
• 
•