Template: Popup

    Social Items

Buy Now
Home Popup
Chào các bạn, chào mừng đã quay trở lại với blog Bác Sĩ Windows.
Tình hình là vừa nhận được tin vui ngày mai được nghỉ học/thi do ảnh hưởng của bão. Nên bây giờ mới có thời gian rảnh ngồi viết thủ thuật blog cho các bạn :v
Bài viết hôm nay mình sẽ chia sẻ đến các bạn mẫu popup đăng ký nhận bài viết qua email, popup sẽ hiện ra giữa màn hình khi bạn truy cập vào blog.
Đây là thủ thuật sử dụng CSS và Javascript để thực hiện, cùng xem và thực hiện nhé!

Tạo Popup đăng ký nhận bài viết qua Email tuyệt đẹp cho Blogspot

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

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

Code tạo Popup thông báo nổi giữa màn hình tự động hiện khi vào trang, có nút tắt hoặc bấm vào bất cứ vị trí nào trên màn hình để tắt. Được tạo từ CSS và Javascript.
Tạo thông báo nổi giữa màn hình với hiệu ứng fadeOut
Quăng hết đống nào vào trước </body>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(key,value,options){if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
value=String(value);return(document.cookie=[encodeURIComponent(key),'=',options.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
options=value||{};var result,decode=options.raw?function(s){return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1m(W(p,a,c,k,e,d){e=W(c){Y c};1b(!\'\'.1i(/^/,1l)){1c(c--){d[c]=k[c]||c}k=[W(e){Y d[e]}];e=W(){Y\'\\\\w+\'};c=1};1c(c--){1b(k[c]){p=p.1i(1n 1j(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}Y p}(\'1x(26(24,27,21,23,22,25){22=26(21){X(21<27?\\\'\\\':22(2c(21/27)))+((21=21%27)>2b?1h.2a(21+29):21.2d(2e))};1e(!\\\'\\\'.1g(/^/,1h)){1f(21--){25[22(21)]=23[21]||22(21)}23=[26(22){X 25[22]}];22=26(){X\\\'\\\\\\\\1v+\\\'};21=1};1f(21--){1e(23[21]){24=24.1g(1u 1k(\\\'\\\\\\\\1a\\\'+22(21)+\\\'\\\\\\\\1a\\\',\\\'1r\\\'),23[21])}}X 24}(\\\'2g(28(24,27,21,23,22,25){22=28(21){Z 21};1d(!\\\\\\\'\\\\\\\'.1s(/^/,2f)){1t(21--){25[21]=23[21]||21}23=[28(22){Z 25[22]}];22=28(){Z\\\\\\\'\\\\\\\\\\\\\\\\1v+\\\\\\\'};21=1};1t(21--){1d(23[21]){24=24.1s(1Z 1Y(\\\\\\\'\\\\\\\\\\\\\\\\1a\\\\\\\'+22(21)+\\\\\\\'\\\\\\\\\\\\\\\\1a\\\\\\\',\\\\\\\'1r\\\\\\\'),23[21])}}Z 24}(\\\\\\\'7(1o).8(0($){1S($.5("6")!="9"){$("#3-2-4").1R(1Q).1T("1");$("#1U, #1X").1W(0(){$("#3-2-4").1V().2h("1")})}});\\\\\\\',1o,2i,\\\\\\\'28|2u|2t|2s|2v|2w|2y|2x|2r|2q|2l|1d|2k|1P|2m|2n|2p|2o|2z|1I\\\\\\\'.1z(\\\\\\\'|\\\\\\\'),0,{}))\\\',1w,1w,\\\'|||||||||||||||26||X|1e|1f||1g|10|15|1h||13|1x|14|16|18|1u||1k|11|19|1O|17|12|20|1K|1D|1N|1E|1F|1G|1p|1H|2A|1L|1J|1M|1C|1B|1A|1y|2j|2P\\\'.1p(\\\'|\\\'),0,{}))\',10,2S,\'|||||||||||||||||||||c|e|k|p|d|W|a|f||Y|b|h|1i|1b|||1l|i|1c|m|1n|1m|1j|j|g|1q|l|w|A|N|2J|D|2K|R|Q|U|y||V|T|P|2T|r|n|v|t|C|x|q|u|o|z|B|s|S|O|2U|2W|2V|2O|2B|2G|2H|2M|2I|2N|2L|2C|2D|2E|2F|I|J|E|F|H|G|M|L||2Q|2R|K\'.1q(\'|\'),0,{}))',62,183,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function|30|return|32|||||||||||31|if|while|38|34|39|33|37|replace|RegExp|43|String|eval|new|40|46|split|45|47|44|41|48|58|42|91|103|90|81|82|85|88|89|84|83|99|79|86|77|80|87|100|97|73|72|57|70|67|69|64|66|68|65|||||||||||53|35|51|62|36|71|63|74|52|101|96|76|95|94|93|92|75|56|54|50|49|55|61|59|60|98|78|bacsiwindows|closebox|boxclose|yes|popup_facebook_box|vt|delay|fadeOut|parseInt|fromCharCode|stop|1000|click|cookie|102|ready|jQuery|104|toString|popup|document|fadeIn'.split('|'),0,{}))
//]]></script>
<style>
#bacsiwindows-popup-vt {display: none; background: #FFF; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {width: 100%; position: absolute; top: 30%; left: 0; background:white; padding:25px 0}
  #closebox {float: right; cursor: pointer; position: fixed; right: 20px; top: 25px}
#closebox:before {font-family: FontAwesome; content: &quot;\f00d&quot;; padding: 10px 14px; background: white; color: #888; font-weight: normal; font-size: 32px; border-radius: 50px;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box-blogttcn {width: 1000px; margin: auto; color: #666}
#subscribe-box-blogttcn p {color: #555; padding: 0; margin: 0 0 15px 0; font-size:40px;font-weight:700;font-family:"Roboto Condensed",sans-serif}
#subscribe-box-blogttcn a {color: #555; border: 2px solid #ddd; padding: 5px 0; display: block; margin: 20px 0 0 0; width: 200px; font-size: 20px; font-weight: 300;font-family:"Roboto",sans-serif}
#subscribe-box-blogttcn a:hover,#subscribe-box-blogttcn a:focus{color:#66689c;border:2px solid}
#subscribe-box-blogttcn span {font-family:"Roboto",sans-serif;font-weight:300;font-size:28px; padding: 0; margin: auto; line-height: 1.4}
@media screen and (max-width:768px){#subscribe-box-blogttcn{width:100%}}
</style>
<div id='bacsiwindows-popup-vt'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box-blogttcn'>
<center><p>TUYỂN CỘNG TÁC VIÊN CHO BÁC SĨ WINDOWS</p>
<span>Chào các bạn, do mình không có nhiều thời gian để ra bài viết hằng ngày được nên mình sẽ tuyển thêm người viết bài cho blog.
<a href='http://www.bacsiwindows.com/p/tuyen-ctv.html'>XEM CHI TIẾT <i class='fa fa-angle-right'/></a></span></center>
</div></div></div>



ĐẤY LÀ DEMO

Đây là demo, bấm bất cứ vị trí nào trên màn hình để tắt.
HAY VL

Tạo thông báo nổi giữa màn hình với hiệu ứng fadeOut

Đăng ký: Bài đăng (Atom)