Chủ Nhật, ngày 12 tháng 6 năm 2016

Code widget form đăng ký nhận bài viết mới qua email cho blogspot bằng Feedburner

Form đăng ký nhận bài viết mới qua email là tiện ích không thể thiếu cho mỗi trang blog. Giúp người đọc nhận bài viết mới nhất của qua việc đăng kí qua email giúp tạo mối liên hệ và giữ chân người đọc thường xuyên ghé thăm blog của bạn.


Feedburner là một dịch vụ miễn phí của Google cho phép quản trị viên có thể tạo nguồn cấp RSS trên website. Feedburner hiện đang cung cấp khá nhiều tính năng hữu ích nhưng để tạo ra được 1 form theo dõi hoàn chỉnh như trên thì chúng ta sẽ cần sử dụng tới tính năng gửi bài viết qua email.

Để tạo form như hình các bạn làm theo trình tự các bước sau:

Lấy url feedburner cho blogspot

URL feedburner là điều kiện quan trọng để form đăng ký nhận bài viết mới hoạt động ổn định. Có lẽ vì cùng chung cha đẻ Google mà mỗi blogspot khi vừa sinh ra đã có sẵn URL feedburner.

Đăng nhập blogger, bên menu trái chọn Bố cục.
Kéo nội dung xuống phần Sidebar và nhấn Thêm tiện ích chọn Theo dõi qua Email


Tại phần này các bạn chỉ cần lấy phần chữ đằng sau .com/ sau đó bấm Hủy


Tiếp tục bấm thêm tiện ích chọn HTML/Javascript


Copy đoạn code dưới đây vào khung

<div class="nam">
<style>
.nam {width:340px; height:240px; background:#3e433e; margin:5px auto; font-size:13px; color:#d1d1d1; text-align:center; padding:10px; }
.nam b {font:bold 24px helvetica; color:#fff; float:left; width:inherit; text-align:center; padding:20px 0; }
.nam form {width:250px; margin:0 auto;}
</style>
<b>THEO DÕI QUA EMAIL</b><br />
Đăng ký để cập nhật những bài viết mới nhất về thủ thuật Windows 10 từ blogthuthuatwin10.blogspot.com!<br />
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ThThutWindows10', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Email của bạn..." style="border: 1px solid #fff; box-sizing: border-box; padding: 9px 5px; width: inherit;" type="text" />
<input name="uri" type="hidden" value="ThThutWindows10" />
<input name="loc" type="hidden" value="vi_VI" />
<input class="button" style="background: #019877; border: none; color: white; font-size: 18px; font-weight: bold; margin: 10px auto; padding: 9px 5px; width: inherit;" type="submit" value="ĐĂNG KÝ NGAY" />
</form>
</div>

  • Thay dòng chữ màu đỏ bằng đoạn bạn đã copy lúc thêm tiện ích Theo dõi qua Email
  • Thay dòng chữ màu xanh thành tên gì tùy thích
  • Dòng width:340px; height:240px để thay đổi kích thước phù hợp với sidebar
  • Dòng #3e433e thay đổi màu nền form
  • Dòng #019877 thay đổi màu nền dòng chữ ĐĂNG KÝ NGAY