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

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. Mẫu này do mình lấy từ Đồng Việt Blog, sau đó chỉnh sửa CSS, Javascript và chia sẻ lại cho các bạn. Xem demo qua ảnh bên dưới, hoặc bấm ra trang chủ của mình để xem nhé.

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

Bước 1. Đăng nhập Blogger ➔ Chỉnh sửa HTML ➔ Mẫu.
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:"\f00d";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-blogttcn {width:600px;background-color:#55579e;}
#subscribe-box-blogttcn p {font-family:'Roboto Condensed';font-size:24px;font-weight:700;color:#fff;line-height:20px;padding:15px 20px 0 20px;margin:0}
#subscribe-box-blogttcn span {color: #f4f4f4; font: 400 20px Roboto; width: 90%; padding-top: 6px; margin: auto; display: block;}
#subscribe-box-blogttcn .emailfield {padding:0px 20px 10px;}
#subscribe-box-blogttcn .emailfield input {background:rgba(0,0,0,.15);color:#fff;padding:10px;margin-top:10px;font-size:18px;font-family:'Roboto',sans-serif;letter-spacing:-.7px;width:46%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box-blogttcn .emailfield input:focus {background:rgba(0,0,0,.35);outline:none;color:#fff}
#subscribe-box-blogttcn .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-blogttcn .emailfield .submitbutton:active,#subscribe-box-blogttcn .emailfield .submitbutton:hover{background:#fff;color:#444!important;}
#subscribe-box-blogttcn .emailfield input::-webkit-input-placeholder{color:#f4f4f4}
#subscribe-box-blogttcn{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-blogttcn'>
<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=BlogThThutCngNgh-BcSWindows' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BlogThThutCngNgh-BcSWindows, &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='BlogThThutCngNgh-BcSWindows'/>
<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.
Đâ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é!

Bài viết liên quan