Chia sẻ code đăng ký nhận bài viết mới cho AMP Blogger

Bất kỳ trang web nào cũng cần cho mình một form đăng ký nhận bài viết mới để người dùng có thể đăng ký và theo dõi trang web. Khi nào có bài viết mới nhất nó sẽ tự động gửi bài viết này cho người đang theo dõi để họ có thể xem. Cái này rất hữu ích vì nó giúp trang web đó vừa giữ chân khách, vừa có một lượt truy cập đáng kể.

Code này mình dùng cho giao diện AMP đang sử dụng, nếu bạn đang dùng AMP thì hãy thử xem nha.

Bước 1: Bạn đăng nhập vào Blogger
Bước 2: Bạn vào Theme –> Edit HTML. Thêm code Widget này vào nơi bạn muốn đặt. Ở đây mình đặt vào Sidebar bên phải

<b:widget id='FollowByEmail1' locked='false' title='Đăng ký nhận bài viết mới' type='FollowByEmail' version='1'>
            <b:includable id='main'>
  <b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
      <form expr:action='"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath' method='get' target='_blank'>
        <table>
          <tr>
            <td>
              <input class='follow-by-email-address' name='email' placeholder='Nhập địa chỉ Email bạn...' title='Nhập địa chỉ Email bạn' type='text'/>
            </td>
            <td>
              <input class='follow-by-email-submit' type='submit' value='Đăng ký'/>
            </td>
          </tr>
        </table>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
      <p>Bạn hãy nhập địa chỉ Email để đăng ký nhận bài viết mới nhất.</p>
    </div>
  </div>
</b:includable>
          </b:widget>

Bước 3: Thêm CSS này vào cặp thẻ <style>

div#FollowByEmail1{border:1px solid #dedede;background:#fff;padding:10px;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#FollowByEmail1 h2{font-family:Roboto,sans-serif;font-size:18px;font-weight:300;text-transform:capitalize;color:#666;margin-bottom:15px;padding:0;line-height:1em}
#FollowByEmail1 p{font-family:Roboto,sans-serif;font-size:14px;font-weight:300;text-transform:capitalize;color:#666;margin-top:15px;padding:0;line-height:1.5em}
#FollowByEmail1 table{width:100%}
#FollowByEmail1 table td:nth-child(1){width:80%}
#FollowByEmail1 table td:nth-child(2){width:20%}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{background:#efefef;width:100%;height:44px;padding:0 10px;font-family:Roboto,sans-serif;font-size:14px;border:0;outline:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{height:44px;font-family:Roboto,sans-serif;text-transform:uppercase;border-radius:0;padding:0 10px;width:100%;font-size:14px;background:#0F83A0;border:0;outline:0;cursor:pointer;color:#fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

Chọn Save theme để lưu lại là xong.