Thư viện

Sự kiện

Thứ Ba, tháng 11 18, 2014

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

Hướng dẫn thủ thuật blog Tạo hộp Theo dõi qua Email / Follow by Email nổi bật & hiện đại cho Blogspot Blogger. Cách tạo hộp theo dõi cực hay dành cho thành viên Terocket!

Chia sẻ:
[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

12 nhận xét:

  1. Đẹp, chuyên nghiệp, cảm ơn terocket. :)

    Trả lờiXóa
    Trả lời
    1. Bạn làm được chưa, share link để mọi người xem nào !

      Xóa
    2. mình làm được rồi nhưng đang xây dựng blog nên chưa publish. :D

      Xóa
  2. Chào bạn.
    mình có một vấn đề này mong đk giải đáp
    Hiện tại mình đang quản trị 1 blog, nhưng lại có nhiều tác giả.
    Và thật sự, có nhiều bài viết của các tác giả đăng lên ko ổn chút nào nhưng lại xuất bản ngay lập trên blog và điều đó ảnh hưởng đến nội dung và chất lượng.
    Vậy có cách nào, để kiểm duyệt các bài đăng của các tác giả trước khi xuất bản.
    Cảm ơn nhiều...

    Trả lờiXóa
    Trả lời
    1. Blog không có chức năng kiểm duyệt nội dung đăng lên bạn nhé, bạn có thể bảo các người viết bài lưu ở dạng nháp hoặc hẹn giờ đăng lên để BQT kiểm tra chất lượng nội dung nha :D

      Xóa
    2. oke... cảm ơn bạn
      sao blog này của namkna, sao bây giờ ít thấy namkna comment giải đáp vậy....

      Xóa
    3. Terocket là website tái cấu trúc từ website cũ bạn nhé :D

      Xóa
  3. cho t hỏi 1 tí là site này của t : http://nhackool.blogspot.com/
    làm cách nào để vô trang chủ mà nó k tự động chuyển xuống hộp theo dõi??
    thanks

    Trả lờiXóa
  4. Thưa anh! Em đã làm đúng chỉ dẫn như trên nhưng nó vẫn bị lỗi như thế này
    http://i.imgur.com/JoFYvFW.png
    Sửa như thế nào vậy ạ. Em xin cảm ơn.

    Trả lờiXóa
  5. Mình làm rồi, thể hiện được... cảm ơn Terocket nhưng thử đăng ký 1 địa Email... thì không thấy được tin mới nhận... mặt dù trang của mình đã đăng bài mới

    Trả lờiXóa
  6. áp dụng vào jimdo, ko ngờ thành công thật, thks terocket nhé ^^~

    Trả lờiXóa