Ủng hộ mình bằng cách bấm vào Quảng Cáo để giúp mình phát triển hơn nhé!
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é.

hop-dang-ky-tuyet-dep-cho-blogspot-----blogttcn-blogspot-com-----
lazy-load-thumbnail--------bacsiwindows-com

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:&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-blogttcn {width:600px;background-color:#55579e;}
#subscribe-box-blogttcn 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-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:&#39;Roboto&#39;,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é!
Nguồn : Bác Sĩ Window
- - 0 bình loạn
#Tags

THAM GIA BÌNH LOẠN NGAY!

Một số lưu ý khi bình loạn

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.