Thêm tiện ích theo dõi qua email cũng là cách thu hút độc giả những người thường xuyên ghé thăm đọc bài viết trên blog. Hơn nữa nếu blog có nhiều người đăng ký nhận bài mới qua email cũng làm cho lượng truy cập blog ổn định và thường xuyên.
Quan trọng nhất vẫn là nội dung bạn viết có đủ hay, hấp dẫn để giữ chân người đọc. Hãy viết những gì người đọc cần, đang tìm kiếm và xuất bản nội dung thường xuyên là cách thu hút độc giả trung thành. Những tiện ích bao quanh chỉ là cầu nối giữa blog với độc giả và theo dõi qua email là một trong số đó.
 |
| Tiện ích theo dõi qua email bằng hộp thoại modal popup |
Tiện ích mà mình giới thiệu trong bài này sử dụng hộp thoại modal popup tức là khi nào độc giả cần họ nhấp vào nút đăng ký hộp thoại mở ra còn không hộp thoại bị ẩn đi không chiếm diện tích.
Trước tiên blog bạn cần tạo mới một nguồn cấp FeedBurner, nếu blog đã có bước tiếp theo chèn tiện ích theo dõi qua email HTML/JavaScript vào bất kỳ vị trí nào trong theme chẳng hạn trong sidebar hay bên dưới tiện ích Bài đăng trên Blog
<b:widget id='HTML100' locked='true' title='Đăng ký' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<b:attr name='class' value='modal--target modal--html'/>
<b:attr name='data-version' value=''/>
<b:attr name='id' value='emailSubscription'/>
<div class='modal--confirm'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=thietkeblogspot' class='modal--dialog light-blue' method='POST' target='_blank'>
<div class='_3em'></div>
<div class='modal--content'>
<div class='modal--header'>
<div class='_mht'>Đăng ký nhận thông báo email từ FeedBurner</div>
<div class='_mhc modal--icon modal--close'></div>
</div>
<div class='modal--body'>
<div><p>Nhận thông báo ngay qua email từ FeedBurner để không bỏ lỡ bài đăng mới nào từ Blog</p></div>
<div class='form-group mr-10'>
<div class='input-group pd-10 w-100'>
<div class='input-title'>Email nhận thông báo <span>*</span></div>
<input autocomplete='off' class='input-text' name='email' pattern='[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}' placeholder='Địa chỉ email...' required='' spellcheck='false' type='email' value=''/>
</div>
</div>
<div><p>Vui lòng kiểm tra hộp thư đến của bạn để biết thông báo xác minh từ FeedBurner. Nếu bạn không thấy email xác nhận, vui lòng kiểm tra thư mục thư rác.</p></div>
</div>
<div class='modal--footer'><button aria-label='Đóng' class='modal--close' type='button'>Đóng</button><button aria-label='Gửi' type='submit'>Gửi</button></div>
</div>
<div class='_3em'></div>
</form>
</div>
</b:includable>
</b:widget>
Thay thietkeblogspot bằng uri của địa chỉ nguồn cấp blog bạn
 |
| Hình minh họa chèn tiện ích theo dõi qua email ngay dưới tiện ích Bài đăng trên Blog |
Tiếp theo chèn liên kết hoặc nút đăng ký
Liên kết
<a class='modal--open' href='#emailSubscription' role='button' title='Đăng ký'>Đăng ký</a>
Button
<button aria-label="Đăng ký" class="theme-button blue modal--open" type="button" data-target="#emailSubscription">Đăng ký</button>
Trường hợp khi độc giả truy cập trang blog, bạn muốn hộp thoại modal tự động bật lên sau khoảng thời gian vài giây và khi độc giả click vào nút tắt hộp thoại khi load lại trang web hộp thoại modal sẽ không tư động bật lên nữa cho đến khi xóa lịch sử duyệt web.
Các bạn chèn thêm đoạn script sau:
$('#emailSubscription .modal--close').click(function(){localStorage.setItem('offclick','true')})
if(localStorage.getItem('offclick')!='true'){
setTimeout(function(){
$('#emailSubscription').show()
$('#emailSubscription').find('.modal--confirm').fadeIn('slow',function(){$(this).addClass('show')})
},7000)
}
Các bạn tham khảo thêm các bài viết trong chuyên mục Thiết kế contact form
