WIDGET ĐĂNG KÝ NHẬN BÀI VIẾT QUA EMAIL TUYỆT ĐẸP CHO BLOGSPOT

Chào các bạn hôm nay mình xin chia sẽ cho các bạn mẫu khung đăng kí nhận bài viết qua email, bản này giống với bản mình đang dùng hiện tại!

CÁC BƯỚC THỰC HIỆN:

Bước 1: Chèn CSS này vào trước thẻ ]]></b:skin>
#subscribe-css{position:relative;padding:20px 0;background: url(//i.imgur.com/vbP0Jy5.jpg) fixed;;overflow:hidden;margin:0;background-size: cover}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden;}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#fff;color:#333;margin:10px 0;padding:12px 15px;width:35%;border:0;border-radius:3px;font-family: &#39;Segoe UI&#39;;}
.subscribe-css-email-button{width:auto;border-radius:3px;background:#2E8B57;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:10px;text-transform:none;font-size:13px;border:0;transition:all .6s;font-family: &#39;Segoe UI&#39;;}
.subscribe-css-email-button:hover{background:#296f48}
#subscribe-css p.subscribe-note{margin:5px;text-align:center;color:#fff;font-size:20px;font-weight:700;line-height:normal}
#subscribe-css p.subscribe-note span{position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu{font-weight:700;color:#fff}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(0,0,0,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%}
.text-note{color: #fff;line-height: normal; font-size: 16px;text-align: center;max-width: 700px; margin: 0 auto;padding:15px 0}
Bước 2: Chèn đoạn code sau đây vào nơi muốn hiện thị, nên để nó cuối trang giống Star Tỉnh IT
<div id='subscribe-css'>
<p class='subscribe-note'><span>ĐĂNG KÝ</span>
<span class='itatu'>EMAIL</span> ĐỂ NHẬN BÀI VIẾT MỚI</p>
<div class='text-note'>Đăng ký vào danh sách gửi thư của chúng tôi để nhận được tất cả các bài viết mới nhất và cập nhật vào hộp thư email của bạn miễn phí.</div>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=startinhit' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=BlogthemeVn&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='BlogthemeVn'/>
<input name='loc' type='hidden' value='vi_VN'/>
<input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Nhập địa chỉ email của bạn...'/>
<input class='subscribe-css-email-button' title='' type='submit' value='ĐĂNG KÝ'/>
</form>
</div>
</div>
</div>
Vậy là mình đã chia sẽ cho các bạn mẫu  subscribe box dạng popup tuyệt đẹp này. Trong quá trình thực hiện có lỗi gì hoặc không thực hiện được thì hãy bình luận xuống bên dưới để mình giúp đỡ nhé.
CHÚC CÁC BẠN THÀNH CÔNG!
Share: