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

Xem thêm:

Bài viết hôm nay, Thanh Liêm Blog sẽ chia sẻ đến các bạn mẫu widget đăng ký nhận bài viết qua Email dạng nổi (dạng popup). Tức là khi bạn truy cập vào blog thì sẽ có một widget ngay giữa màn hình, giống như quảng cáo vậy đó. 

Đây là mẫu Subscribe Box được mình tùy biến lại . Do vậy phần HTML giống nhau, mình chỉ chỉnh sửa phần CSS thôi. Ok giờ bắt đầu thôi!

CÁCH THỰC HIỆN

Bước 1. Chèn CSS vào trước thẻ ]]></b:skin>

#sub-box{display:none;background:rgba(0,0,0,0.3);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{border:8px solid rgba(255,255,255,.1);box-shadow:0 0 30px rgba(0,0,0,.15);width:700px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#closebox{float:right;cursor:pointer;position:absolute;right:0;top:0;display:none}
#closebox:before{font-family:FontAwesome;content:'\f00d';padding:5px 8px;background:#fff;color:#2c3e50;font-weight:normal;font-size:14px;border-radius:0 0 0 10px}
#bsw_subscribe-box-v5{float:left;width:400px;height:200px;background:linear-gradient(120deg,#7577a9,#6d9698);position:relative}
#bsw_subscribe-box-v5 .emailfield{padding:25px}
#bsw_subscribe-box-v5 .emailfield input{background:0;color:rgba(255,255,255,.5);padding:10px 0;margin:0 auto 10px;font-size:14px;font-family:'Roboto',sans-serif;font-weight:300;width:70%;text-align:center;border-bottom:1px solid rgba(255,255,255,.15);border-top:0;border-left:0;border-right:0;outline:0;text-transform:uppercase;letter-spacing:2px;display:table;transition:.5s}
#bsw_subscribe-box-v5 .emailfield input:focus::-webkit-input-placeholder{opacity:0.5}
#bsw_subscribe-box-v5 .emailfield .submitbutton{background:#fff;color:#7184a1;text-transform:uppercase;font-weight:500;font-size:18px;border:none;outline:none;cursor:pointer;margin:20px auto 0;letter-spacing:1px;width:200px;border-radius:4px}
#bsw_subscribe-box-v5 .emailfield .submitbutton:hover{opacity:.8}
#bsw_subscribe-box-v5 .emailfield input::-webkit-input-placeholder{color:rgba(255,255,255,.7)}
#subscribe_box-bsw-v5{float:right;width:300px;height:200px;background:#fff;position:relative;text-align:center}
#subscribe_box-bsw-v5 h2{padding:15px;text-transform:uppercase;letter-spacing:1px;color:#737da6;border-bottom:double;display:table;margin:0 auto 20px}
#subscribe_box-bsw-v5 p{padding:0 20px;line-height:1.5;margin:0;letter-spacing:0.3px;color:#656}
#subscribe_box-bsw-v5:after{border-left:20px solid transparent;border-right:20px solid #fff;border-top:20px solid transparent;border-bottom:20px solid transparent;content:'';bottom:50%;position:absolute;left:-40px;margin:0;transform:translate(0,50%)}

Bước 2. Chèn HTML vào trước thẻ </body>

<div id='sub-box'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='bsw_subscribe-box-v5'>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=ThanhLimBlog' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ThanhLimBlog, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tên bạn&quot;;}' onfocus='if (this.value == &quot;Tên bạn&quot;) {this.value = &quot;&quot;;}' placeholder='Tên bạn' type='text' value='Tên bạn'/>
<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Địa chỉ Email&quot;;}' onfocus='if (this.value == &quot;Địa chỉ Email&quot;) {this.value = &quot;&quot;;}' placeholder='Địa chỉ Email' type='text' value='Địa chỉ Email'/>
<input name='uri' type='hidden' value='ThanhLimBlog'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Đăng ký'/>
</form></div></div>
  <div id='subscribe_box-bsw-v5'><h2>Subscribe box</h2> <p>Nhập địa chỉ Email và bấm đăng ký, bạn sẽ nhận được bài viết mới nhất từ Thanh Liêm Blog hoàn toàn miễn phí qua inbox!!
    </p></div>
</div></div>

Bước 3. Chèn Javascript vào trước thẻ </head>

<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'>
jQuery(document).ready(function($){if($.cookie(&quot;popup_facebook_box&quot;)!=&quot;yes&quot;){$(&quot;#sub-box&quot;).delay(0).fadeIn(&quot;10000&quot;);$(&quot;#closebox, #boxclose&quot;).click(function(){$(&quot;#sub-box&quot;).stop().fadeOut(&quot;10000&quot;);});}});
</script>

Bước 4. Chỉnh sửa lại cho phù hợp và lưu mẫu. 

Tut By: Thanh Liêm

THE END

Code,Thủ thuật Blogger,

Đánh giá hôm nay:

{[['']]}