TẠO WIDGET ĐĂNG KÝ NHẬN THÔNG BÁO QUA EMAIL DẠNG POP-UP ĐẸP CHO BLOGGER/BLOGSPOT


Để sử dụng tiện ích này tính ra thì cũng đơn giản thôi. OK! Bắt tay vào công việc nào, làm theo mình nhé!
BƯỚC 1: Chèn đoạn Code dưới đây vào trước thẻ đóng ]]></b:skin>
#sub-box {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {background:#fff;border:8px solid #fff;width:600px;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#closebox:before {font-family: FontAwesome;content:"\f00d";padding:5px 8px;background:#fff;color:#2c3e50;font-weight:normal;font-size:14px;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box {width:600px;background-color:#2c3e50;}
#subscribe-box p {font-family:'Roboto Condensed';font-size:18px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;font-family:'Roboto Condensed';width:46%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}

* Ở đây các bạn có thể thay đổi màu của Background, màu của viền, độ rộng,...
BƯỚC 2: Chèn thêm đoạn Code dưới đây vào trước thẻ đóng </body>
<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(2500).fadeIn('fast');$('#closebox, #boxclose').click(function(){$('#sub-box').stop().fadeOut('fast');});}});
</script>
<div id='sub-box'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box'>
<center><p><i class='fa fa-envelope-o'></i> ĐĂNG KÝ NHẬN TIN QUA EMAIL</p></center>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' type='text' value='Your Name'/>
<input name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' type='text' value='Your Email'/>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe Now'/>
</form>
</div></div>
</div>
</div>

*Lưu ý: Thay dòng màu đỏ thành ID RSS của bạn!

Chúc các bạn thành công nhé! ♥
Nguồn : 7Blog




ĐĂNG KÝ NHẬN TIN QUA EMAIL


Lê Hùng

Chia sẽ kiến thức và tư duy sáng tạo của bản thân mỗi ngày cho cộng đồng IT Việt Nam và Thế giới. Chia sẽ thủ thuật lập trình Csharp, Visual Basic, Python, Php, Javascript, Css, Html. Tối ưu hóa Windows, Microsoft, Facebook, Youtube, Chrome...v.v. Và nhiều thứ bổ trợ cho công nghệ lập trình mới nhất.

Đăng nhận xét

Mới hơn Cũ hơn
/* bao tri */