Tạo hộp subscribe dưới chân bài viết cho Blogger - Style 2

Ngoài kiểu subscribe để ở sidebar thì mình thấy ở một vài blog họ còn kết hợp để thêm một cái nữa ở ngay dưới chân bài viết. Cái này khá là lợi ích vì số lượng đăng kí có thể tăng lên đáng kể, vì nó ở ngay dưới bài viết nên đọc xong mà thấy blog hay thì họ có thể đăng kí luôn. Cách đây mấy hôm mình đã làm một mẫu như thế, hôm nay giới thiệu với các bạn luôn.

Xem demo ở ngay dưới bài viết hoặc tại Codepen

#Thêm CSS

1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán code CSS dưới vào trên thẻ mà bạn vừa tìm

#emailsub{text-align: center;background:#000}
.emailsubtitle{margin-bottom: 25px;font-family:arial;font-weight:bold;color:#fff;padding: 10px 0px;
  margin: 0px 0px 25px 0px;
  text-transform: capitalize;  background: #00ACFF;
  
}
.emailsubform{width:300px;
  margin: 0px auto 0px;
  }
input.emailupdatesinput{  width: 93%;border: 1px solid #000;
    border: 1px solid #000;
    font-family:arial;padding: 10px;
    font-size: 15px;
    color:#000
}
input.joinemailupdates{ 
    padding: 10px !important;
    margin-top: 10px;
    margin-bottom:10px;
    font-size: 15px;
    font-family: arial;
    width: 100%;
    border: 1px solid #fff;
    color:#fff;
    
    
    font-size:15px;
    background:#000
    }
input.joinemailupdates:hover{background:#fff;color:#000}

#Thêm HTML

1. Tìm thẻ <div class='post-footer'>
2. Dán code dưới vào dưới thẻ mà bạn vừa tìm

<div id="emailsub">
    <div class="emailsubtitle"><i class="fa fa-envelope"></i> Follow by email</div>
    <div class="emailsubform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogkhanh98', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
      
      <input class="emailupdatesinput" name="email" placeholder="Email address..." type="text" />
      <input value="Submit" class="joinemailupdates" type="submit" />
      <input name='uri' type='hidden' value='blogkhanh98'/>
      <input name='loc' type='hidden' value='en_US'/>
      </form>
  </div>
  </div>

#Thêm font Awesome

1. Tìm thẻ </head>
2. dán thẻ dưới vào trên thẻ mà bạn vừa tìm, nếu trong template của bạn đã có thẻ này rồi thì không cần thêm nữa.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>

3. Lưu mẫu lại và kiểm tra kết quả.

#DEMO

Follow by email