Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS cho Blogspot

đã xuất bản
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

55 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. Trả lời
    1. Chia sẻ cho một cái nhá (y)

      Xóa
    2. 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 đó.

      Xóa
    3. Quá hay :v đã share cho anh Trường Đẹp Tri

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

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

      Xóa
    6. Cập nhật trên bài đi anh

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

      Xóa
    8. Copy lại code mới đi em, mới fix lỗi.

      Xóa
  2. 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ờiXóa
    Trả lời
    1. Oke cảm ơn em nhé <3 /=clap

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

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

      Xóa
  3. Trả lời
    1. Cảm ơn em, hay thì chia sẻ nhé (y)

      Xóa
  4. Đẹp trai phải thế :v Vỗ tay vỗ tay /=clap

    Trả lờiXóa
  5. Share cái CÓ THỂ BẠN QUAN TÂM đi :v

    Trả lờiXóa
    Trả lời
    1. Google tìm related post nhá.

      Xóa
    2. Như ông mới đẹp :))

      Xóa
    3. RIP về mà xài đi, nghe đồn mấy này giỏi lắm mà?

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

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

      Xóa
    2. 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]

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

    Trả lờiXóa
    Trả lời
    1. Vì chưa có CSS của .close đó.

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

      Xóa
    3. 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}

      Xóa
  8. 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ờiXóa
    Trả lời
    1. Ủa đâu liên quan gì nhau mà xung đột hửm!?

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

      Xóa
    3. 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?

      Xóa
    4. thử cái là biết ngay à :v

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

    Trả lờiXóa
    Trả lời
    1. 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

      Xóa
  10. 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ờiXóa
    Trả lời
    1. Là bài viết bạn đang xem đó bạn.

      Xóa
  11. thẻ body không thấy, chỉ thấy thẻ đóng /body thôi bạn

    Trả lờiXóa
  12. đã chèn, nhưng mình chưa hiểu câu áp dụng thẻ
    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
    bất cứ thẻ nào là sao bạn

    Trả lờiXóa
    Trả lời
    1. Ví dụ nếu bạn muốn khách khi click vào 1 link nào đó sẽ hiện ra popup thì bạn làm như sau:

      <a href='#bsw_popup'>Click để hiện Popup</a>

      Xóa
  13. Đạik làm sao để thêm css cho cái nút mở popup anh nhỉ, loai hoai nãy h mà ko đc, toàn lỗi :(

    Trả lờiXóa
    Trả lời
    1. Đặt class cho nút rồi viết css cho class đó thôi, ví dụ:
      <a class='bsw-btn1' href='#bsw_popup'>BSW Popup</a>

      Viết css cho class bsw-btn1:
      .bsw-btn1 {
      display:inline-block;
      padding:10px;
      background:black;
      color:yellow;
      margin:5px;
      }

      Xóa
    2. Ôh year, cảm ơn anh ạ :))

      Xóa
  14. mình nghĩ nên để cái comments ở phần share trên pc thôi, trên mobile nó chiếm chỗ nút lên r :v

    Trả lờiXóa
    Trả lời
    1. Ok bác để mình xem lại :))

      Xóa
    2. Của mình nó vừa đủ :v ➔ xem ảnh

      Xóa
    3. với điện thoại 18:9 nó khác k để ý

      Xóa
Gợi ý cho bạn