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 ý,...
Quăng hết đống code này vào sau thẻ <body>
Ví dụ: <a href="#bsw_popup">Mở Popup</a>
<i> Chữ in nghiêng </i>
<u> Chữ gạch chân </u>
<strike>Chữ gạch ngang </strike>
Sau đó dùng thẻ
Đã hiểu
Bạn có thể dùng nó để tạo popup thông báo, liên hệ, lưu ý,...
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>&lt;a href=&#39;LINK&#39;&gt;TÊN_HIỂN_THỊ&lt;/a&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> &lt;b&gt; <b>Chữ in đậm</b> &lt;/b&gt;<br/> &lt;i&gt; <i>Chữ in nghiêng</i> &lt;/i&gt;<br/> &lt;u&gt; <u>Chữ gạch chân</u> &lt;/u&gt;<br/> &lt;strike&gt; <strike>Chữ gạch ngang</strike> &lt;/strike&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é.DEMO THỦ THUẬT
Hướng dẫn bình luận
Chèn link
Sử dụng thẻ<a href='LINK'>TÊN_HIỂN_THỊ</a>Chèn hình ảnh
[img] LINK_ANH [/img] - sử dụng công cụ bên dưới để upload ảnh.Định dạng chữ
<b> Chữ in đậm </b><i> Chữ in nghiêng </i>
<u> Chữ gạch chân </u>
<strike>
Chèn một đoạn Code
Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.Sau đó dùng thẻ
[code] CODE_ĐÃ_MÃ_HÓA [/code]Đã hiểu
Nguồn : bacsiwindows.com
sao kì vậy. hay do temp?
Trả lờiXóaHùng cũng ko biết nữa, chắc là do sever blogspot chưa cập nhật hết toàn bộ người dùng blogger :(, vì Hùng cũng đọc bài của Niệm viết rồi ấy.. haiza
Xóa