Chia sẻ code đăng ký nhận bài viết mới cho AMP Blogger
Minh Khang 6 năm trước

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.

105 lượt xem | 0 Bình luận
Tôi là Minh Khang là một tác giả trên web allfreevn.com. Tôi chuyên viết bài viết trong lĩnh vực Công nghệ thông tin và game. Tôi là một chuyên gia có kinh nghiệm và đam mê trong lĩnh vực này, với kiến thức sâu và khả năng áp dụng linh hoạt, tôi đã viết nhiều bài viết chất lượng về các khía cạnh khác nhau của công nghệ thông tin như thủ thuật, hướng dẫn cách làm thế nào... Cám ơn các bạn xem bài viết của tôi.

Bình luận gần đây