[Tips] - Tạo hộp Theo dõi qua Email / Follow by Email nổi bật & hiện đại cho Blogspot Blogger

[Tips] - Tạo hộp Theo dõi qua Email / Follow by Email nổi bật & hiện đại cho Blogspot Blogger

Tiếp tục với chuỗi thủ thuật blogspot mà Terocket đang thực hiện, hôm nay Terocket sẽ hướng dẫn cả nhà thủ thuật thiết kế hộp đăng ký bản tin và nhận bản tin blog qua email, một trong những chức năng quan trọng nhất khi viết blog và cực cần thiết cho blog. Thủ thuật này có tên là [Tips] - Tạo hộp Theo dõi qua Email / Follow by Email nổi bật & hiện đại cho Blogspot Blogger. Chắc chắn các bạn sẽ rất hài lòng với thủ thuật này!

Live Demo

Thủ thuật [Tips] - Tạo hộp Theo dõi qua Email / Follow by Email nổi bật & hiện đại cho Blogspot Blogger là một thủ thuật blog nâng cao và cực kỳ chuyên nghiệp. Ấn tượng đậm nét cho blog của bạn khi người dùng nhìn vào, mang dáng dấp mạnh mẽ và cực ký quý phải, nổi bật lên hẵn toàn trang web, và đó chính là điều gây chú ý với người dùng internet để họ nhập email nhận bản tin.

Lấy tông màu xanh chủ đạo, ấn tượng nhưng đầy nhẹ nhàng và bí ẩn, chắc chắn rằng, bạn không thể lường hết được sức quyến rủ của tiện ích này với người dùng đâu. Và giờ, hãy theo chân Terocket để thực hiện thủ thuật này nào.

Để thực hiện thủ thuật này, chỉ cần chèn đoạn mã code sau vào HTML/Javascript và Lưu lại.

Đầu tiên bạn cần tạo một Widget HTML/Javascript nhé. Hãy vào Blog Title → Layout → Add Widget → HTML/JavaScript và chèn đoạn mã code sau vào và Lưu lại.

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Terocket', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">
 <h1>SUBSCRIBE TODAY</h1>
<img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px">&nbsp;Sign up and receive our free Newsletter &nbsp;</span></font></center><br/>
 <input type="hidden" value="Terocket" name="uri" />
 <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
 <input type="hidden" name="loc" value="en_US" />
 <input type="submit" value="Subscribe" class="login-submit" />
</form>
</center>
<style>
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
 font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
 padding: 15px 0 0 0;
 width:200px;
 color: #993300;
    text-align: center;
 filter: alpha(opacity:90);
 KHTMLOpacity: 0.90;
 MozOpacity: 0.90;
 opacity: 0.90;
}
a.tt:hover span.top{
 display: block;
 padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
 display: block;
 padding: 0 8px;
 }
a.tt:hover span.bottom{
 display: block;
 padding:3px 8px 10px;
 color: #548912;
}
::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:-moz-placeholder {
  color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
  color: #bcc0c8;
}
:-ms-input-placeholder {
  color: #bcc0c8 !important;
}
.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
  background: #ebc9a2;
}
.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.login {
  padding: 18px 20px;
  width: 80%;
  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}
.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 10px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration: underline;
}
</style>

Bạn nhớ là phải thay Terocket thành địa chỉ Feed của bạn nha. Và trong điều kiện để người dùng có thể đăng ký được khi nhập email vào, bạn cần tạo Feedburner cho blog của bạn.Bạn vào hướng dẫn Cách đăng ký và sử dụng FeedBurner cho Blogspot mà trước đây Terocket từng giới thiệu để tạo Feed nha.

Vậy là cuối cùng cũng đã xong thủ thuật blog [Tips] - Tạo hộp Theo dõi qua Email / Follow by Email nổi bật & hiện đại cho Blogspot Blogger này rồi. Ai đã làm được thì chia sẽ nó đến với bạn bè của mình nha, còn chưa làm được hãy gửi một bình luận ở dưới đây để hỏi đáp nhé!

Ở đây còn một số thủ thuật liên quan đến theo dõi bài viết qua email và Feed cho blogspot, cả nhà tham khảo nha.

1. [Tips] - Theo dõi qua email kết hợp mạng xã hội ở bài viết Blogger V1
2. Sửa lỗi: The reference to entity "zx" must end with the ';' delimiter.
3. Sửa lỗi "The feed does not have subscriptions by email enabled"
4. RSS Feeds là gì
5. Sửa lỗi "feed filesize is larger than 576K..." khi đăng ký FeedBruner
6. Fix lỗi không lưu được feedburner 512K limit trong blogspot
7. Đăng ký và cài đặt Feedburner Atom cho Blogspot
8. Tạo hộp đăng ký (Subscription) trên sidebar cho blogger
9. Hộp đăng ký nhận tin (Subscribe ) dạng Popup cho blogger
10. Tạo nút RSS màu cam bằng CSS thuần túy
11. Hộp Subscribe kết hợp twitter, google pluss, feed cho blogger
12. Đổi màu widget "Follow by Email" của blogger
13. Tạo Feed cho tất cả các nhãn bài đăng
14. Cách đăng ký và sử dụng FeedBurner cho Blogspot

Trứng Vịt - Terocket