Tạo hộp đăng ký giữa màn hình với hiệu ứng tuyệt đẹp cho Blogspot

Khóa Học Online Thủ Thuật Template Blogger

-
Chào các bạn, hôm nay mình sẽ chia sẻ cho các bạn mẫu hộp đăng ký với hiệu ứng ẩn, hiện, tự thay đổi màu nền tuyệt đẹp cho Blogspot. Các bạn có thể xem demo trong ảnh bên dưới nhé.


Các bước thực hiện

Bước 1. Đăng nhập Blogger ➔ Chủ đề ➔ Chỉnh sửa HTML
Bước 2. Chèn đoạn CSS sau vào trước thẻ ]]></b:skin> trong template.
#sub-box {display:none;background:rgba(0,0,0,0.5);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:10px solid rgba(255, 255, 255, 0.2);width:600px;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:0;top:0;display:none}
#closebox:before {font-family: FontAwesome;content:&quot;\f00d&quot;;padding:5px 8px;background:#fff;color:#2c3e50;font-weight:normal;font-size:14px;border-radius:0 0 0 10px}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box-plus {width:600px;background-color:#55579e;}
#subscribe-box-plus p {font-family:&#39;Roboto Condensed&#39;;font-size:24px;font-weight:700;color:#fff;line-height:20px;padding:15px 20px 0 20px;margin:0}
#subscribe-box-plus span {color: #f4f4f4; font: 400 20px Roboto; width: 90%; padding-top: 6px; margin: auto; display: block;}
#subscribe-box-plus .emailfield {padding:0px 20px 10px;}
#subscribe-box-plus .emailfield input {background:rgba(0,0,0,.15);color:#fff;padding:10px;margin-top:10px;font-size:18px;font-family:&#39;Roboto&#39;,sans-serif;letter-spacing:-.7px;width:46%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box-plus .emailfield input:focus {background:rgba(0,0,0,.35);outline:none;color:#fff}
#subscribe-box-plus .emailfield .submitbutton {background:rgba(0,0,0,.15);color:#fff;text-transform:uppercase;font-weight:normal;font-size: 22px;border:none;outline:none;width:100%;cursor:pointer;transition:color .2s;transition:background .3s}
#subscribe-box-plus .emailfield .submitbutton:active,#subscribe-box-plus .emailfield .submitbutton:hover{background:#fff;color:#444!important;}
#subscribe-box-plus .emailfield input::-webkit-input-placeholder{color:#f4f4f4}
#subscribe-box-plus{animation:colorBackground 20s infinite;-webkit-animation:colorBackground 20s infinite;-moz-animation:colorBackground 20s infinite;-o-animation:colorBackground 20s infinite}
@keyframes colorBackground{0%{background-color:#55579e;color:#fbcf61}20%{background-color:#6bd57e;color:#6bd57e}40%{background-color:#ff6f6f;color:#ff6f6f}60%{background-color:#57cff4;color:#57cff4}80%{background-color:#0ed4c8;color:#0ed4c8}100%{background-color:#fbcf61;color:#fbcf61}}
@-webkit-keyframes colorBackground{0%{background-color:#fbcf61;color:#fbcf61}20%{background-color:#6bd57e;color:#6bd57e}40%{background-color:#ff6f6f;color:#ff6f6f}60%{background-color:#57cff4;color:#57cff4}80%{background-color:#0ed4c8;color:#0ed4c8}100%{background-color:#fbcf61;color:#fbcf61}}
@-moz-keyframes colorBackground{0%{background-color:#fbcf61;color:#fbcf61}20%{background-color:#6bd57e;color:#6bd57e}40%{background-color:#ff6f6f;color:#ff6f6f}60%{background-color:#57cff4;color:#57cff4}80%{background-color:#0ed4c8;color:#0ed4c8}100%{background-color:#fbcf61;color:#fbcf61}}
@-o-keyframes colorBackground{0%{background-color:#fbcf61;color:#fbcf61}20%{background-color:#6bd57e;color:#6bd57e}40%{background-color:#ff6f6f;color:#ff6f6f}60%{background-color:#57cff4;color:#57cff4}80%{background-color:#0ed4c8;color:#0ed4c8}100%{background-color:#fbcf61;color:#fbcf61}}
Bước 3. Chèn đoạn code sau vào trước thẻ </body> trong template.
<div id='sub-box'>
<div id='boxclose'></div>
<div id='boxview'>
<div id='closebox'></div>
<div id='subscribe-box-plus'>
<center><p> ĐĂNG KÝ NHẬN TIN QUA EMAIL</p><span>Hãy nhập địa chỉ Email và bấm đăng ký, bạn sẽ nhận được các bài viết mới nhất từ Bác Sĩ Windows hoàn toàn miễn phí!!</span></center>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=PlusKienThuc' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=PlusKienThuc, &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='PlusKienThuc'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Đăng ký'/>
</form></div></div></div></div>
Bước 4. Chèn đoạn script sau vào trước thẻ </head> trong template.
<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(5000).fadeIn(&quot;10000&quot;);$(&quot;#closebox, #boxclose&quot;).click(function(){$(&quot;#sub-box&quot;).stop().fadeOut(&quot;10000&quot;);});}});
</script>
Bước 5. Lưu template.

Lời kết

Đây là mẫu hộp đăng ký mà mình thấy ưng ý nhất. Nên áp dụng thêm một thẻ điều kiện nữa để hộp đăng ký chỉ hiển thị ở trang chủ hoặc trang bài viết,...
Nếu như có lỗi trong quá trình thực hiện thì hãy bình luận bên dưới để mình giúp đỡ nhé!
Chia sẻ bởi: Plus Kiến Thức - PlusKienThuc.Com
Nếu bạn thấy bài viết có ích thì hãy like và chia sẻ bài viết này nhé!

Bình Luận Gần Đây