Tạo Hộp Trình Chiếu Cho Trang Web Cực Xịn

Mình không biết nói gì thêm ngoài việc share tip xinh xinh đáng yêu này, chắc nó có thể giúp ích cho bạn.

Nghe tựa đề có thể lạ, nhưng nó có thể là người bạn đồng hành của bạn đấy. Đây là tip hướng dẫn làm thế nào thêm hộp trình bày một trang web khác trong trang web của bạn. 

Tạo Hộp Trình Chiếu Cho Trang Web

Các Bước Thực Hiện

Chú ý!
Trước khi thực hiện, vui lòng sao lưu chủ đề của các bạn để tránh gặp tình trạng lỗi và dễ dàng khôi phục, mình không chịu trách nhiệm.

Bước 1: 

  • Sao chép tất cả code cung cấp dưới đây.
<div class="puArticle">
<h2>Presentation frame</h2>
<iframe class="puIframe" src="https://Flamingo.eu.org/" title="Flamingo-tezh"></iframe>
</div>

<style>
.puIframe{position:relative;display:block;width:100%;height:500px;border-radius:5px;border:1px solid var(--contentBo);margin:30px 0}
@media screen and (max-width:640px){.puIframe{border-radius:30px}}
.drkM .puIframe{border-color:var(--darkTalt)}
</style>

Chú ý!
Thay đổi https://Flamingo.eu.org/ thành trang web bạn muốn trình bày, thay đổi Flamingo-tezh thành tựa đề của trang web đó.

Bước 2: 

  • Dán nó ở bất kì đâu trong trang web mà bạn muốn.

Có thể dán ở chế độ soạn thảo html của bài viết khi trình bày một trình xem trước nào đó.


Demo Hộp Trình Chiếu Ở Bài Viết

Mình sẽ trình bày trang web https://www.ygfamily.com/ nhé.

Phần trình bày



Lời Kết

Chúng ta có cặp quan hệ từ điều kiện (giả thuyết) - kết quả: Nếu...thì. Ví dụ:
  • "Nếu bạn bỏ vài phút để thực hiện các bước mình hướng dẫn thì bạn sẽ có khung trình bày đẹp".
  • "Nếu bài viết này có ích với bạn thì hãy bình luận tích cực và cho nó 5 sao, đừng quên bình luận cho chủ của nó".

Tham khảo: www.flamingo.eu.org