TẠO BOX SUBSCRIBE KHUNG ĐĂNG KÝ QUA EMAIL ĐƠN GIẢN
Chào các bạn, hôm nay rảnh rỗi nên ngồi mò tý về box subcriber cho blogspot, nó khá giống với cái hiện tại của mình đang dùng nhưng của mình thì có chỉnh qua rồi!Để 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
Một số lưu ý khi bình luậ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.