Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS cho Blogspot
/ lúc / 45 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS cho Blogspot. Sử dụng thẻ HTML :target, popup được thiết kế chỉ hoàn toàn bằng CSS với hiệu ứng và transform tuyệt đẹp cho Blogspot.
Bạn có thể dùng nó để tạo popup thông báo, liên hệ, lưu ý,...

Xem demo

Click Me


Chèn code

Quăng hết đống code này vào sau thẻ <body>
<style>#bsw_popup{top:0;left:0;right:0;bottom:0;position:fixed;opacity:0;visibility:hidden;transition:.5s;transform:scale(1.2)}
#bsw_popup:target{transform:scale(1);background:rgba(0,0,0,.2);opacity:1;visibility:visible;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999999999999;transition:.5s}
.bsw_popup_{background:#fff;border-radius:4px;z-index:999;width:600px;max-width:100%;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);margin:0;padding:20px;box-sizing:border-box;box-shadow:0 0 100px rgba(0,0,0,.1)}
.bsw_popup_ h2{margin:0 0 .75em;padding:0;text-align:center;font-weight:700;font-family:Roboto,sans-serif;color:#4267b2}
.bsw_popup_ h3{margin:0 0 5px;padding:0;font:500 15px Roboto;text-transform:uppercase}
.bsw_popup_ p{margin:0 0 20px;padding:0;font:400 15px Roboto;color:#555;line-height:1.5}
.bsw_popup_ p a{font-weight:700;color:#555}
.bsw_popup_ p a:hover{text-decoration:underline}
<!-- code popup bacsiwindows.com -->
</style>
<div id='bsw_popup'>
    <div class='bsw_popup_'>
        <h2>Hướng dẫn bình luận</h2>
        <h3>Chèn link</h3>
        <p>Sử dụng thẻ <code>&amp;lt;a href=&amp;#39;LINK&amp;#39;&amp;gt;TÊN_HIỂN_THỊ&amp;lt;/a&amp;gt;</code></p>
        <h3>Chèn hình ảnh</h3>
        <p><code>[img] LINK_ANH [/img]</code> - sử dụng công cụ bên dưới để upload ảnh.</p>
        <h3>Định dạng chữ</h3>
        <p> &amp;lt;b&amp;gt; <b>Chữ in đậm</b> &amp;lt;/b&amp;gt;<br/> &amp;lt;i&amp;gt; <i>Chữ in nghiêng</i> &amp;lt;/i&amp;gt;<br/> &amp;lt;u&amp;gt; <u>Chữ gạch chân</u> &amp;lt;/u&amp;gt;<br/> &amp;lt;strike&amp;gt; <strike>Chữ gạch ngang</strike> &amp;lt;/strike&amp;gt;<br/> </p>
        <h3>Chèn một đoạn Code</h3>
        <p>Đầu tiên sử dụng <a href='//bacsiwindows.com/mahoahtml' target='blank'>công cụ này</a> để mã hóa đoạn code muốn chèn.<br/>Sau đó dùng thẻ <code>[code] CODE_ĐÃ_MÃ_HÓA [/code]</code></p><a class='close' href='#close' title='Close'><i aria-hidden='true' class='fa fa-check'/> Đã hiểu</a> </div>
</div>

Cách sử dụng

Thêm href="#bsw_popup" hoặc id="#bsw_popup" vào bất cứ thẻ nào mà bạn muốn khi click sẽ hiện popup ra là được.
Ví dụ: <a href="#bsw_popup">Mở Popup</a>

Tổng kết

Với thiết kế đẹp và cách thực hiện đơn giản, đây là mẫu popup được thiết kế bởi Bác Sĩ Windows chỉ bằng HTML và CSS nên khi sử dụng sẽ không làm ảnh hưởng đến những thành phần khác trên blog cũng như tốc độ tải trang. Cho một bình luận/chia sẻ nếu thấy hữu ích nhé.
Click Me

BÌNH LUẬN VỀ BÀI VIẾT (45)

avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

Chất quá a <3

TRẢ LỜI
avatar
Trường Nguyễn

Chia sẻ cho một cái nhá (y)

TRẢ LỜI
avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

Nút share đâu mất tiu r a

TRẢ LỜI
avatar
Trường Nguyễn

Nút chia sẻ nằm ngay trên phần bình luận đó em, hoặc nút Facebook chớp chớp bên phải cũng được đó.

TRẢ LỜI
avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

Quá hay :v đã share cho anh Trường Đẹp Tri

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn em <3 :v

TRẢ LỜI

Bài viết rất bổ ích, cảm ơn a vì đã chia sẻ, e share bài viết rồi nhé /=ok

TRẢ LỜI
avatar
Trường Nguyễn

Oke cảm ơn em nhé <3 /=clap

TRẢ LỜI

Mà không tin cái này không dùng js, đỉnh ghê vậy luôn đó (y)

TRẢ LỜI
avatar
Trường Nguyễn

Ừm toàn CSS thôi em, xem code đi không có một tí nào js luôn :D

TRẢ LỜI
avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

Ủa mà cho code vào sao <body> rồi làm gì để click anh

TRẢ LỜI
avatar
Trường Nguyễn

Theme href="#bsw_popup" vào bất cứ nút nào mà em muốn nó hiện thôi em.

TRẢ LỜI
avatar
Star Đức Blog

chất quá anh :<

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn em, hay thì chia sẻ nhé (y)

TRẢ LỜI
avatar
Tính Getter

Đẹp trai phải thế :v Vỗ tay vỗ tay /=clap

TRẢ LỜI
avatar
Trường Nguyễn

:v đẹp trai

TRẢ LỜI

Cập nhật trên bài đi anh

TRẢ LỜI
avatar
Trường Nguyễn

Ok đã cập nhật /=ok

TRẢ LỜI
avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

Chỉ rõ cho em được không anh

TRẢ LỜI
avatar
Trường Nguyễn

Xem lại bài viết đi anh vừa cập nhật đấy.

TRẢ LỜI
avatar
🔰☣ Lê Thanh Phong☣🔰⚜️

Vẫn không được a

TRẢ LỜI
avatar
Trường Nguyễn

Copy lại code mới đi em, mới fix lỗi.

TRẢ LỜI
avatar
Trần Thanh Bình

Share cái CÓ THỂ BẠN QUAN TÂM đi :v

TRẢ LỜI
avatar
Trường Nguyễn

Google tìm related post nhá.

TRẢ LỜI
avatar
Trần Thanh Bình

Như ông mới đẹp :))

TRẢ LỜI
avatar
Trường Nguyễn

RIP về mà xài đi, nghe đồn mấy này giỏi lắm mà?

TRẢ LỜI
avatar
Phú Cường Blogger

K có js là t thích. Thanks so much vì bài viết bổ ích nhé :)

TRẢ LỜI
avatar
Phú Cường Blogger

Vl nó ra cái mặt kia, đổi lại icon. Thanks so much vì bài viết bổ ích nhé :D

TRẢ LỜI
avatar
Trường Nguyễn

Ok cảm ơn nè :v

TRẢ LỜI
avatar
Phú Cường Blogger

Logo nha ông. Giờ t mới onl lại đc.
[img]https://3.bp.blogspot.com/-uM9FsgRwsMY/WhLo2KpANnI/AAAAAAAAByA/5NYanUbCmU455oQS97fFONmEoT8WoReCQCLcBGAs/s1600/optimized-af6s.png[/img]

TRẢ LỜI
avatar
Trường Nguyễn

Ok bro /=ok

TRẢ LỜI
avatar
Việt Hưng

https://viethungtest.blogspot.com/#bsw_popup
Cái chữ đã hiểu của tui không hiện như demp nhỉ ?

TRẢ LỜI
avatar
Phú Cường Blogger

Vì chưa có CSS của .close đó.

TRẢ LỜI
avatar
Trường Nguyễn

Nay cúp điện cmnr nên không lên PC xem được.

TRẢ LỜI
avatar
Lợi Nguyễn Thế

tính chèn cái code upanh imgur kiểu này mà bị xung đột với code lightbox chán ghê

TRẢ LỜI
avatar
Trường Nguyễn

Ủa đâu liên quan gì nhau mà xung đột hửm!?

TRẢ LỜI
avatar
Trường Nguyễn

Thêm CSS trước ]]></b:skin>
a.close{color:#fff;background:#4267b2;text-align:center;display:block;padding:8px 25px;margin:0;width:80px;border-radius:4px;text-transform:uppercase;font:500 14px Roboto;letter-spacing:.5px;float:right}

TRẢ LỜI
avatar
Lợi Nguyễn Thế

thử rồi 1 là cái lightbox không hoạt động 2 là up ảnh k hoạt động

TRẢ LỜI
avatar
Trường Nguyễn

Thiệt là hai cái code không liên quan gì nhau luôn mà lại xung đột à. K hiểu nổi?

TRẢ LỜI
avatar
Lợi Nguyễn Thế

thử cái là biết ngay à :v

TRẢ LỜI
avatar
Việt Hưng

Close không được !!
https://poweroftips.blogspot.com/2018/02/death-block-cong-cu-chan-nguoi-dung.html#bsw_popup

TRẢ LỜI
avatar
Star Cường IT ­

Có hai cách khắc phục :))
1 . Xóa #bsw_popup sau liên kết.
2 . Xóa popup luôn cho khỏi xuất hiện :v

TRẢ LỜI
avatar
Trường Nguyễn

Như trên.

TRẢ LỜI

Bác sĩ hướng dẫn tạo popup giống blog này với (https://twitter4x.blogspot.com)
Click vào thông báo hiện popup:
"Blog mình đang trong quá trình chỉnh sửa và hoàn thiện template mới nên còn một số chức năng click vào nhưng chưa dùng được. Lưu ý những blog nào đã liên kết với bên mình vui lòng đọc bài này để cập nhật logo blog nhé."

TRẢ LỜI
avatar
Trường Nguyễn

Là bài viết bạn đang xem đó bạn.

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.