Thủ Thuật Blogspot l Tạo Popup Hiện Ra Khi Click Với Hiệu Ứng Đẹp Bằng CSS

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>
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: starbinhblog.com@gmail.com
• Facebook: Fb.com/tomitsystem
Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

Bình luận Facebook:

» Hướng Dẫn Chèn Liên Kết: <a href="Link" rel="nofollow">Tên</a>
» Tích vào ô "Thông báo cho tôi" để nhận thông báo phản hồi của Admin

Không có nhận xét nào