Hướng dẫn thêm khung đăng ký nhận bài viết qua Email

Hôm này By Trọng Trung - Thủ Thuật, Blogger. Hướng dẫn tạo khung đăng ký nhận bài viết qua Email, giúp người đọc có thể nhận bài viết mới ngay lập tức họ sẽ nhận được thông báo ngay trong thư điện tử mà không cần ghé thăm website/blog của bạn thường xuyên.

HƯỚNG DẨN TẠO KHUNG NHẬN BÀI VIẾT MỚI QUA GMAIL:
Bước 1: Bạn chèn đoạn CSS sau lên phía trên thẻ ]]></b:skin> trong mẫu
#subscribebox{background:#28176d;padding:20px}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:500;margin:15px 0}
.follow-subscribe-social{margin:-20px -20px 10px;padding:15px 0;background:rgba(0,0,0,0.39)}.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li:last-child{margin:0}.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li a{font-size:16px;color:#fff;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}.follow-subscribe-social ul li a:hover{color:#fff} form.subscribe{margin-top:0} form.subscribe input{display:block;width:100%} .subscribe-email{height:40px;border:none;margin:0 0 15px;font-size:13px;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff;font-family:inherit} .subscribe-email:focus{outline:0}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#5031af;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;font-family:inherit}form.subscribe .placeholder{color:#cacaca} form.subscribe input:-ms-input-placeholder{color:#cacaca} form.subscribe input::-webkit-input-placeholder{color:#cacaca} form.subscribe input:-moz-placeholder{color:#fafafa} form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button:focus{outline:0}
Bước 2: Để hiển thị khung đăng ký bạn cần dán đoạn HTML sau vào chỗ cần hiển thị, tuy nhiên với tiện ích này bạn nên dán ở bên Sidebar để phù hợp về thẩm mỹ hơn.
<div id="subscribebox">
<div class="follow-subscribe-social"><ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li><li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li><li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li><li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<p>Bạn sẽ không bỏ lỡ bất kỳ bài viết mới nào, chúng tôi sẽ gửi bạn email khi có bài viết mới nhất.</p><li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <div class='clear'></div>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Địa chỉ email...'/><input class="subscribe-button" type="submit" value="Đăng ký" /> </form>
</div>

Chỉnh sửa: Bạn sửa lại YOUR-USER-NAME thành Url feedburner của bạn.
Chúc bạn thành công và tăng được lượt tương tác giữa bạn đọc blog hơn, bạn có thể đăng ký nhận tin từ blog của mình để không bỏ lỡ bất kỳ bài viết nào nhé!
Nguồn bài viết được chia sẻ đầu tiên tại blog
Nội dung chính
      Bài đăng mới hơn Bài đăng cũ hơn
      0 Nhận xét