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

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 @!
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

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:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

8 nhận xét:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Anh ơi, em chèn rồi mà không thấy video là sao nhỉ?

    ReplyDelete
    Replies
    1. Đơ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.

      Delete
    2. 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?

      Delete
    3. 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.

      Delete
  3. thằng xạo lồn......có cái tivi nào đâu.....blog tao xemvanghenhac.blogspot.com

    ReplyDelete