Tạo Subscribe box đẹp với Jquery cho Blogger
Chắc hẳn các bạn làm blog chẳng còn xa lạ gì với Email hoặc RSS Subscribe form bởi đây là một trong những công cụ quan trọng và cơ bản để tă...
https://cuanhcuem.blogspot.com/2011/11/tao-subscribe-box-ep-voi-jquery-cho.html
Chắc hẳn các bạn làm blog chẳng còn xa lạ gì với Email hoặc RSS Subscribe form bởi đây là một trong những công cụ quan trọng và cơ bản để tăng traffic cho site của bạn. Vị trí thường thấy của Subscribe form là trên các Sidebar, vừa là một công cụ lại vừa là một "đồ trang sức" cho blog của bạn.
Tuy nhiên, nếu "bộ mặt" blog của bạn đã quá chật chội hoặc bạn muốn có một "đề nghị ấn tượng" cho khách ghé thăm thì một Subscribe form theo dạng Pop-up là lựa chọn tuyệt vời. Trong bài viết này, ShareAllWorld sẽ giới thiệu với bạn cách tạo một Subscribe Form như vậy cho blogger, dựa trên hướng dẫn của Bloggermint.
1. Đăng nhập Blogger → Design → Edit HTML (Blogger mới: Template → Edit HTML)
2. Chèn đoạn mã dưới đây vào giữa khóa <head></head>
Trong đó, đoạn mã màu đỏ quy định thời gian lưu giữ trong cookie. Trường hợp trên, thời gian quy định hiển thị Subscribe Box là 1 ngày kể từ lần cuối cùng bạn truy cập trang web. Bạn có thể thay đổi thời gian này theo nhu cầu của bạn (1000 = 1000 mili giây = 1 giây). Biến màu xanh "oneDay" không cần thiết phải thay đổi khi bạn tùy chỉnh thời gian hiển thị.
3. Tìm khóa </body> và chèn đoạn mã sau ngay trước nó:
Thay shareallworld bằng Feedburner ID của bạn.
3. Nhấn "Save template" và thưởng thức thành quả của bạn!
Tuy nhiên, nếu "bộ mặt" blog của bạn đã quá chật chội hoặc bạn muốn có một "đề nghị ấn tượng" cho khách ghé thăm thì một Subscribe form theo dạng Pop-up là lựa chọn tuyệt vời. Trong bài viết này, ShareAllWorld sẽ giới thiệu với bạn cách tạo một Subscribe Form như vậy cho blogger, dựa trên hướng dẫn của Bloggermint.
How to make a beautiful Subscribe box for Blogger
1. Đăng nhập Blogger → Design → Edit HTML (Blogger mới: Template → Edit HTML)
2. Chèn đoạn mã dưới đây vào giữa khóa <head></head>
<link media="screen" rel="stylesheet" href="https://sites.google.com/site/ez2mmo/colorbox.css" />
<link media="screen" rel="stylesheet" href="https://sites.google.com/site/ez2mmo/pop.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://shareallworld.googlecode.com/files/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var oneDay = 1000*60*60*24;
var expires = new Date((new Date()).valueOf() + oneDay);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"480px", inline:true, href:"#subscribe"});
}
});
</script>
Trong đó, đoạn mã màu đỏ quy định thời gian lưu giữ trong cookie. Trường hợp trên, thời gian quy định hiển thị Subscribe Box là 1 ngày kể từ lần cuối cùng bạn truy cập trang web. Bạn có thể thay đổi thời gian này theo nhu cầu của bạn (1000 = 1000 mili giây = 1 giây). Biến màu xanh "oneDay" không cần thiết phải thay đổi khi bạn tùy chỉnh thời gian hiển thị.
3. Tìm khóa </body> và chèn đoạn mã sau ngay trước nó:
<!-- Subscribe Box introduced by http://www.shareallworld.info -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h2 class="box-title">Don't wanna miss any new post?</h2>
<h3 class="box-tagline">Get notified about our updates.</h3>
<!-- BEGIN #subs-container -->
<div id="subs-container" class="clearfix">
<!-- BEGIN .box-side -->
<div class="box-side left">
<div class="box-icon"><a class="email" href="http://feedburner.google.com/fb/a/mailverify?uri=shareallworld"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8f5WRi0bTgIqMbGy6dd9cyRc6IH6jmvZPQ8nIIrvLq9vTQCgREpneVDq0SmKaRZpi3Ce33U0pVt_cwSdaBYCC0gjTVD0EJaoNBBHCJK0XL1GdI59iw8swEJ0k5akEEAiQWc96LgQJNZ0/s72/email.png"/></a></div>
<h4><a href="http://feedburner.google.com/fb/a/mailverify?uri=shareallworld">Subscribe by Email</a></h4>
<h5>Get alerts directly into your inbox after each post and stay updated!</h5>
<a class="sub" href="http://feedburner.google.com/fb/a/mailverify?uri=shareallworld" title="Subscribe Now!">Subscribe</a>
<!-- END .box-side -->
</div>
<div id="box-or">OR</div>
<!-- BEGIN .box-right -->
<div class="box-side right">
<div class="box-icon"><a class="rss" href="http://feeds.feedburner.com/shareallworld"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixNKDv2NKxjEy9eyUmLkFPkCFEK46elvx1O84QoUnUxGaN8UiwSy4IfgM6Zmdb7qEEjKGqmWWJm48mcqtpTZAeGER1DKyU9FhPNGGHxD3lqXY4QjWDyy6gPZhbcl1QOGBpyVDn6P40KpM/s64/rss.png"/></a></div>
<h4><a href="http://feeds.feedburner.com/shareallworld">Subscribe by RSS</a></h4>
<h5>Add our RSS to your feedreader to get regular updates from us.</h5>
<a class="sub" href="http://feeds.feedburner.com/shareallworld" title="Subscribe Now!">Subscribe</a>
<!-- END .box-side -->
</div>
<!-- BEGIN #subs-container -->
</div>
</div>
</div>
Thay shareallworld bằng Feedburner ID của bạn.
3. Nhấn "Save template" và thưởng thức thành quả của bạn!
Bạn có thể download các files CSS và JS của thủ thuật này để upload lên host riêng của bạn.
