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

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!

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 honghaiblog */
#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(http://i.imgur.com/FnLYmvB.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ừ Hồng Hải Blog hoàn toàn miễn phí! Cam kết không SPAM!</p>
 </h2>
    <form action="//feedburner.google.com/fb/a/mailverify?uri=Honghaiblogseo" 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é!

Theo Bacsiwindows