Tạo widget Đăng ký nhận bài viết qua Email tuyệt đẹp cho Blogspot (Style 4)

Chào các bạn, do có nhiều bạn đã yêu cầu mình chia sẻ mẫu widget nhận bài viết qua Email trên group. Hôm nay rảnh rỗi ngồi nghịch một tí CSS, làm ra cái widget này nên sẵn tiện viết bài chia sẻ luôn cho nóng!

Mẫu này được mình tùy biến lại từ code của bài viết này – click xem. Vì vậy toàn bộ code HTML giống 100%, mình chỉ sửa CSS lại thôi. Nếu bạn có sử dụng mẫu trước đó của mình thì xóa đi nhé, kẻo xung đột CSS lại ra tùm lum la.
Ok không nói nhiều nữa giờ bắt đầu thôi.

CÁCH THỰC HIỆN

Bước 1. Chèn CSS này trước thẻ ]]></b:skin>

/* Đăng ký qua Email */
/* Subscribe box by bacsiwindows.com */
#subscribe_box-bsw{background:#fff;margin:0;padding:0;z-index:-1}
#subscribe_box-bsw h2{padding:220px 5px 10px;margin:0;font:500 22px Roboto;text-align:center;text-transform:uppercase;color:#fff;background:#73c8a9 url(https://4.bp.blogspot.com/-0C3zYTMZyV8/WXBEJdW1GiI/AAAAAAAAAjU/_YPrW1IoUXUhca4lnShwqRNOiDlXVGjDACLcBGAs/s1600/subscriber-box—-bac-si-windows.png) no-repeat center center;position:relative;background-position:50% 0%;background-size:contain}
#subscribe_box-bsw p{margin:0;padding:15px;letter-spacing:0;color:#fff;font-size:16px;text-transform:none;line-height:1.4;font-weight:400;font-family:Roboto,sans-serif}
#subscribe_box-bsw form{padding:30px 0}
#subscribe_box-bsw h2:after{border-left:20px solid transparent;border-right:20px solid transparent;border-top:20px solid transparent;border-bottom:20px solid #73c8a9;content:”;bottom:-40px;position:absolute;left:50%;transform:rotate(180deg);margin:0 -15px}
.u-subscribe-box-bsw{font:400 16px Roboto;transition:.35s;outline:0;background:0;color:#444;padding:10px 0;display:block;border:0;width:80%;box-sizing:border-box;margin:0 auto 10px;border-bottom:1px solid rgba(0,0,0,.2)}
.e-subscribe-box-bsw{font:400 16px Roboto;transition:.35s;outline:0;background:0;color:#444;padding:10px 0;display:block;border:0;width:80%;box-sizing:border-box;margin:0 auto 10px;border-bottom:1px solid rgba(0,0,0,.2)}
.s-subscribe-box-bsw{cursor:pointer;border:0;outline:0;display:block;color:#fff;text-decoration:none;background:#73c8a9;width:80%;margin:20px auto 0;padding:10px 15px;font:400 16px Roboto;letter-spacing:0;transition:.35s;border-radius:5px}
.s-subscribe-box-bsw:hover{background:#555}
#bsw_subscribe{background:repeating-linear-gradient( 135deg,#4fa8ed,#4fa8ed 10px,#fff 10px,#fff 20px,#f84d3b 20px,#f84d3b 30px,#fff 30px,#fff 40px );padding:6px;clear:both;margin:0 0 10px}
.e-subscribe-box-bsw:focus::-webkit-input-placeholder,.u-subscribe-box-bsw:focus::-webkit-input-placeholder{color:#999;font-size:11px;-webkit-transform:translateY(-20px);transform:translateY(-20px);visibility:visible!important;visibility:visible;transition:all 0.25s ease}
.u-subscribe-box-bsw::-webkit-input-placeholder,.e-subscribe-box-bsw::-webkit-input-placeholder{color:#888}

Bước 2. Chèn HTML này vào nơi bạn muốn hiển thị widget này.

<div id=’bsw_subscribe’>
<div id=’subscribe_box-bsw’>
  <div class=’i-subText’>
    <h2>Đăng ký nhận bài viết
    <p>Nhập địa chỉ Email và bấm đăng ký, bạn sẽ nhận được bài viết mới nhất từ BSW hoàn toàn miễn phí! Cam kết không SPAM!</p>
</h2>
    <form action=’//feedburner.google.com/fb/a/mailverify?uri=bacsiwindowsdotcom‘ class=’i-boxForm’ method=’post’ target=’_new’>
      <input class=’u-subscribe-box-bsw’ name=’name’ placeholder=’Tên của bạn‘ type=’text’/>
      <input class=’e-subscribe-box-bsw’ name=’email’ placeholder=’Địa chỉ Email‘ type=’text’/>
      <input class=’s-subscribe-box-bsw’ type=’submit’ value=’ĐĂNG KÝ‘/>
    </form>
  </div>
</div>
  </div>

Bước 3. Chỉnh sửa một số thông tin lại cho phù hợp ở chỗ in đậm.

LỜI KẾT

Ok với 3 bước đơn giản chỉ copy và paste :v bạn đã có cho mình một widget đăng ký bài viết qua email tuyệt đẹp rồi. Chúc bạn thành công, nếu thực hiện không được thì hãy bình luận xuống dưới bài viết để mình hỗ trợ và giúp đỡ nhé!