Tạo khung đăng ký bài viết qua email cho blogger

KIỀU GIA HUY / lúc 19:58 ngày Thứ Ba, 19 tháng 9, 2017 / 4 bình luận

Kết bạn Kiều Gia Huy để cùng trao đổi, học hỏi và nhận nhiều bài viết hay, hữu ích nhé!

Chào các bạn, trong bài viết hôm nay mình sẽ chia sẻ cho các bạn một tiện ích đăng ký bài viết khá là đẹp cho blogspot.
Tiện ích này cho phép người đọc nhận được bài viết mới của blog bạn thông qua email của họ.
Các bạn có thể xem demo trực tiếp qua ảnh bên dưới.

Hướng dẫn thực hiện

Bước 1: Các bạn hãy chèn đoạn css bên dưới lên trước thẻ ]]></b:skin trong template.

#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:16px;text-align:center;font-weight:300;padding:20px 10px 10px}
.follow-subscribe-social{padding:0 0 14px;border-bottom:#858585 double 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 5px 0 0;border-bottom:none;background:rgba(0,0,0,.1);border-radius:5px;padding:7px}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-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 input{display:block;width:100%}
.subscribe-email{height:30px;border:none;margin:0 0 10px;font-size:13px;color:#fff;font-family:inherit;background-color:rgba(255,255,255,0.2);text-align:center}
.subscribe-email:focus{outline:0}
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{cursor: pointer;height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#8BC34A;-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}
.subscribe-button:focus{outline:0}

Bước 2: Vào Bố cục Thêm tiện ích Chèn đoạn code dưới vào nơi bạn muốn hiển thị.

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="https://www.facebook.com/bao2312" target="_blank"><i class="fa fa-facebook"></i></a></li>

<li><a href="https://plus.google.com/+DiiN%C3%B4" target="_blank"><i class="fa fa-google"></i></a></li>

</ul>
</div>
<p>Nhập địa chỉ email và nhấn Đăng Ký, bạn sẽ không bỏ lỡ bài viết mới nào, chúng tôi sẽ gửi thông báo cho bạn khi có bài viết mới.</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=baoshareblog' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=baoshareblog, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='baoshareblog'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Nhập địa chỉ mail..";}' onfocus='if (this.value == "Nhập địa chỉ mail..") {this.value = "";}' value='Nhập địa chỉ mail..'/>
<input class="subscribe-button" type="submit" value="ĐĂNG KÝ" />
</form>
</div>
</div>