Cập nhật 2026: Giao diện mới và hướng đi mới ! Xem chi tiết →

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

Hoàng Nhân Khôi Chủ Nhật, 18 tháng 10, 2015
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:



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

Bài Viết Liên Quan

Bình Luận (8)

Unknown
Unknown lúc 04:44 22 tháng 12, 2015
Nhận xét này đã bị quản trị viên blog xóa.
Phim.Plus
Phim.Plus lúc 22:07 2 tháng 1, 2016
anh chỉ giúp em với
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 22:21 2 tháng 1, 2016
???? Giúp gì được cho bạn.
Unknown
Unknown lúc 05:05 20 tháng 2, 2016
Anh ơi, em chèn rồi mà không thấy video là sao nhỉ?
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 05:44 20 tháng 2, 2016
Đơn giản vậy là bạn chèn sai thui ,,,,,, Có 2 bước rõ ràng bạn thực hiện đúng ko ?? Quan trạng nhất là khâu lấy đường link VIDEO bạn đã lấy chắc chắn đúng chưa.
Unknown
Unknown lúc 06:56 20 tháng 2, 2016
Em thấy một khoảng trống dành cho Video. Thấy cả chữ Ghim và Tải Xuống những không thấy cái Tivi là v.
Về đừng link em chèn cái này https://www.youtube.com/watch?v=BlCBnY3Y-jw
như vậy có đúng không a?
Hoàng Nhân Khôi
Hoàng Nhân Khôi lúc 08:05 20 tháng 2, 2016
Mình đã xem qua Blog của bạn: Bạn thực hiện thủ thuật này đã sai 2 chỗ

Thứ nhất: Ở bước 1 bạn đã thực hiện sai. Mình hướng dẫn chèn đoạn Code ở bước 1 vào phía trên thẻ b:skin> bạn đêm chèn vào thẻ body là cái sai thứ nhất.

Thứ hai: Ở trên mình hướng dẫn bạn lấy đường link youtube ở dạng Mã nhúng >>> Bạn lại lấy đường link ở dạng bình thường đưa vào là cái sai thứ hai.

>>> Bạn phải Chỉnh lại hai cái sai trên là oke ngay.
Nặc danh
Nặc danh lúc 22:12 7 tháng 6, 2017
thằng xạo lồn......có cái tivi nào đâu.....blog tao xemvanghenhac.blogspot.com

Đăng nhận xét