Để thấy rõ hơn thì mời các bạn xem hình demo dưới đây nhé!
Hình Minh Họa |
CÁC BƯỚC THỰC HIỆN
Bước 1: Chèn CSS này vào trước thẻ ]]></b:skin>
/* Subscribe Box */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 mình.
#subscribe-css{position:relative;padding:20px 0;background:#234150;overflow:hidden;border-top:5px solid #2c4584;}
.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:#000;margin:10px 0;padding:15px 20px;width:35%;border:0;border-radius:3px}
.subscribe-css-email-button{background:rgba(0,0,0,.3);color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .7s}
.subscribe-css-email-button:hover{background:linear-gradient(to left, #1a75c6, #44A18A);}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:#fff;font-size:180%;font-weight:400;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:400;font-style:italic;color:#fff;text-transform:lowercase}
#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:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.7);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
<div id='subscribe-css'>
<p class='subscribe-note'><span>ĐĂNG KÍ</span> <span class='itatu'>NHẬN</span> BÀI VIẾT MỚI</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Starcuongit' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=Starcuongit', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Star Cường IT'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Email của bạn...'/><input class='subscribe-css-email-button' title='' type='submit' value='Subscribe'/></form>
</div>
</div>
</div>
HƯỚNG DẨN EDIT BOX SUBCRIBER
- Để thay đổi màu nền của box thì các bạn thay #234150 thành mã màu ưa thích của các bạn
- Nếu muốn cái nền thành hình ảnh thì các bạn thay #234150 thành url(htpp://linkanh.com)
LỜI KẾT
Chúc các bạn thành công
Không có nhận xét nào