Hộp đăng ký nhận bài viết qua Email cho Blogspot

Mọi Bài Đăng Đều Được Viết Bởi Admin Nguyễn Tỉnh, Vui Lòng Ghi Nguồn Khi Copy Bài Đăng Từ Trang Này!

Chào mọi người, Hôm nay mình sẽ share cho các bạn một tiện ích cho blogger/blogspot đó là Hộp đăng ký nhận bài viết qua Email. Code này do mình edit từ code trên twistblogger.com nhá.
Chức năng của nó là biểu mẫu cho phép mọi người đăng ký theo dõi các bài viết mới trên Blog.Việc tạo một Hộp đăng ký nhận bài viết qua Email (Subscribe by email) chuyên nghiệp và bắt mắt ắt hẳn sẽ giúp bạn tăng số lượng người dùng đăng kí.

Xem demo

Xem demo tại đây >>

Bắt đầu thủ thuật

Đầu tiên bạn vào Blogger => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <head> và Lưu mẫu.

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

Tiếp đến bạn vào Blogger => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu.

<style>#twist-blogger-sbox-v2{padding:0;padding-bottom:5px;font-family:Arial,Helvetica;display:block;margin:0;width:100%;border-radius:1px;border:0;background:#333}#twist-blogger-sbox-v2 .main_tagline{padding:0;line-height:2.5em;font-size:26px;margin:0;height:90px!important;overflow:hidden;font-weight:normal;color:#FFF;text-align:center;border:0;background-color:#03a9f5}#twist-blogger-sbox-v2 .email_icon{display:table;transition: all .5s;margin:-35px auto 0;font-size:25px;padding:12px;height:25px;width:25px;background-color:#03a9f5;color:#FFF;border-radius:50px;border:10px solid #fff;line-height:0}#twist-blogger-sbox-v2:hover .email_icon{transform: rotate(360deg);}#twist-blogger-sbox-v2 p{font-size:15px;color:#f9f9f9;text-shadow:0 -1px 0 #000;line-height:20px;padding:7px 10px 0;text-align:center;width:90%;margin:0 auto}#twist-blogger-sbox-v2 .rssform{padding:0;margin:0 auto;display:block}#twist-blogger-sbox-v2 .rssform input{padding:8px;margin:15px auto;font-size:13px;color:#000;text-align:center;display:block;font-family:Arial,Helvetica;font-weight:normal;width:90%;height:38px;text-transform:uppercase;outline:none!important;border:1px solid #fff;border-radius:1px;background-color:#fcfcfc;box-sizing:border-box!important}#twist-blogger-sbox-v2 .rssform .button:hover{opacity:.8}#twist-blogger-sbox-v2 .rssform .button{background:#03a9f5;border:0;color:white!important;margin-top:15px;outline:none!important;transition:all .3s ease-in-out;padding:5px 2px!important;float:none;text-transform:uppercase;font-size:15px;font-weight:normal;cursor:pointer}#twist-blogger-sbox-v2 .social_profiles{line-height:1.2em;display:table;float:none;margin:0 auto;text-align:center;min-width:157px;padding:5px 0;border:0}#twist-blogger-sbox-v2 .social_profiles a:hover{color:#FFF;background-color:#ff5959;border-color:#FFF}#twist-blogger-sbox-v2 .social_profiles a{color:#000;margin:0 5px;text-align:center;float:left;display:table;padding:4px 5px;background-color:#fff;border-radius:50px;border:2px solid #2d2d2d;width:15px;height:15px;line-height:0;font-size:16px;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out}#twist-blogger-sbox-v2 form{margin-bottom:10px!important}</style>
<div id="twist-blogger-sbox-v2">
<div class="main_tagline">
Đăng kí nhận tin</div>
<div class="email_icon">
<i class="fa fa-envelope"></i></div>
<p>Nhập Email để nhận bài viết mới nhất từ Star Tuấn Blog</p>
<div class="rssform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=StarTuan','popupwindow','scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" placeholder="Địa chỉ Email của bạn..." />
<input type="hidden" value="StarTuan" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input value="Đăng kí ngay" class="button" type="submit" />
</form>
</div>
</div>

Tùy chỉnh:

Thay #03a9f5 thành mã màu bạn thích.
Thay Nhập Email để nhận bài viết mới nhất từ Star Tuấn Blog thành nội dung bạn muốn.
Thay đổi địa chỉ StarTuan thành địa chỉ URL FeedBurner Blog của bạn.

Vậy là xong. Chúc các bạn thành công!