Tiện ích Email Subscribe mình giới thiệu trong bài viết này sẽ sử dụng Feedburner. Feedburner là một dịch vụ tạo nguồn cấp RSS cho website với một số chức năng như tự động gửi bài viết qua email, thống kê người đọc RSS....
Để tạo nguồn cấp RSS cho Blog, các bạn vào feedburner.google.com sau đó đăng kí với email và địa chỉ Blog của mình. Cuối cùng, copy phần username để sử dụng về sau
Thêm tiện ích Email Subscribe cho Blogger
Bước 1 : Thêm đoạn code dưới đây vào phía dưới <head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Do mình sử dụng font Roboto và icon từ Font Awesome nên mới thêm đoạn code trên, bạn nào am hiểu thì có thể tự tùy chỉnh lại
Bước 2 : Thêm đoạn code dưới đây vào phía trên ]]></b:skin>
#subscribe-box {width: 355px;max-width: 100%;margin: 0 auto;background: url('https://lh3.googleusercontent.com/-L0_icbQHvEE/VytOKAzj1KI/AAAAAAAAC94/pnK13TfWtmckvfXrlrwm8qiR28KTCwz7ACCo/s355/header.png') no-repeat #fff;background-size: 100% 10px;height: auto;padding-top: 10px;padding-bottom: 20px;font-family: 'Roboto';border-radius: 8px;border: 1px solid #e3e3e3;}
.subscribe-text {background: #f7f7f7;padding: 30px 50px;tet-align: center;color: #b8b8b8;font-size: 30px;font-weight: 300;}
.emailfield {padding: 4%;padding-bottom: 0;}
#subscribe-box .emailfield input {background: #f9f9f9;color: #b8b8b8;padding: 15px 10px;margin-top: 10px;font-size: 13px;border: 2px solid #EBEBEB;border-bottom: 4px solid #EBEBEB;border-radius: 8px;width: 92%;transition: all 0.4s ease-in-out;font-family: 'Roboto';}
#subscribe-box .emailfield input:focus {background: #fff;outline: none;color: #888;}
#subscribe-box .emailfield .submitbutton {background: #F27669;font-family: 'Roboto';color: #fff;font-weight: 700;font-size: 18px;border: none;border-radius: 8px;border-bottom: 4px solid #D96A5D;outline: none;width: 100%;cursor: pointer;transition: all 0.4s ease-in-out;margin-bottom: 10px;}
#subscribe-box .emailfield .submitbutton:active {outline: none;border: none;background: #D96A5D;color: #fff;}
#subscribe-box .emailfield .submitbutton:hover {background: #D96A5D;color: #fff;}
.subscribe-social {color: #b8b8b8}
.subscribe-social {display: block;text-align: center;}
.subscribe-social p {margin-bottom: 30px;}
.icon-button {padding: 10px 15px;color: #fff;text-decoration: none;border-radius: 8px;}
.icon-button i {margin-right: 3px;}
.twitter {background: #5DC2E6;}
.facebook {background: #578EE8;}
Bước 3 : Tạo một Widget HTML/Javascript mới trong Bố cục và điền đoạn code dưới đây vào
<div id="subscribe-box">
<div class='subscribe-text'>Sign up in seconds</div>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Sign me up!" />
</form>
</div>
<div class='subscribe-social'>
<p>..or you can skip that and sign up via</p>
<a class="icon-button twitter" href="#" rel="nofollow" target="_blank" title="Twitter Tweet"><i class="fa fa-twitter"></i><span>Twitter</span></a>
<a class="icon-button facebook" href="#" rel="nofollow" target="_blank" title="Facebook Share"><i class="fa fa-facebook"></i><span>Facebook</span></a>
</div>
</div>
thay toàn bộ USER-NAME bằng username bạn lấy ở trên và đường dẫn của icon Facebook, Twitter
Chúc các bạn thành công
Không có nhận xét nào:
Đăng nhận xét