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('http://feedburner.google.com/fb/a/mailverify?uri=BlogThThutCngNgh-BcSWindows, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='name' onblur='if (this.value == "") {this.value = "Tên bạn";}' onfocus='if (this.value == "Tên bạn") {this.value = "";}' placeholder='Tên bạn' type='text' value='Tên bạn'/>
<input name='email' onblur='if (this.value == "") {this.value = "Địa chỉ Email";}' onfocus='if (this.value == "Địa chỉ Email") {this.value = "";}' 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("popup_facebook_box")!="yes"){$("#sub-box").delay(5000).fadeIn("10000");$("#closebox, #boxclose").click(function(){$("#sub-box").stop().fadeOut("10000");});}});
</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é!
0 blogger-facebook: