Star Cường IT | Blog chia sẻ thủ thuật

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 */
#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%;}

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.

<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 (&apos;http://feedburner.google.com/fb/a/mailverify?uri=Starcuongit&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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ỉ vài bước đơn giản thì các bạn có thể tự tạo cho mình một cái box subcriber chất rồi :)) Nếu có thắc mắc hay lỗi gì thì các bạn hãy cứ comment bên dưới, mình sẽ giải đáp tất cả cho các bạn.
Chúc các bạn thành công