Các hôm trước mình đã giới thiệu mẫu subscribe ở sidebar và một cái ở dưới chân bài viết. Hôm nay mình tiếp tục chia sẻ thêm một mẫu subscribe nằm ở dưới header. Mẫu này kết hợp thêm social bookmark và hỗ trợ responsive nên bạn không cần phải quá lo lắng khi thêm vào blog.
#DEMO
Bạn có thể xem hình ảnh minh họa ở dưới hoặc tại Codepen
#Responsive
Width > 520px |
480px < Width < 520px |
Width < 480px |
#Thêm vào Blogger
1. Đăng nhập Blogger
2. Bố cục > Thêm tiện ích > HTML/Javascript
3. Dán code dưới vào
Thay blogkhanh98 thành username Feeds của bạn
Thay FACEBOOK_USER_NAME thành user name Facebook của bạn
Thay TWITTER_USER_NAME thành username Twitter của bạn
Thay GP_USER_NAME thành username hay là ID Google Plus của bạn
5. Lưu mẫu lại và kiểm tra kết quả.
Mọi thắc mắc xin để lại bình luận ở dưới bài viết, nếu tiện ích này không hoạt động tốt trên template của bạn thì hãy để lại URL blog của bạn để mình có thể khắc phục.
<!-- http://khanh98.blogspot.com/2015/07/responsive-subscribe-nam-duoi-header-cho-blogger.html --><div class="kb-follow-by-email-inner"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("http://feedburner.google.com/fb/a/mailverify?uri=blogkhanh98", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow"> <input class="kb-follow-by-email-address" name="email" placeholder="Email address..." type="text" /> <input class="kb-follow-by-email-submit" type="submit" value="Submit" /> <input name="uri" type="hidden" value="blogkhanh98" /> <input name="loc" type="hidden" value="en_US" /> <a href="https://facebook.com/FACEBOOK_USER_NAME" class="follow-by-email-social-facebook"> Facebook </a> <a href="https://twitter.com/TWITTER_USER_NAME" class="follow-by-email-social-twitter">Twitter </a> <a href="https://plus.google.com/GP_USER_NAME" class="follow-by-email-social-gplus">G+ </a> </form> </div> <style type="text/css"> /* http://khanh98.blogspot.com/2015/07/responsive-subscribe-nam-duoi-header-cho-blogger.html */ form{margin-top:0px} .kb-follow-by-email-inner{background:#000;font-family:arial;font-weight:bold;overflow:hidden;border:double #fff} input.kb-follow-by-email-address{background:#fff;padding:7px;margin:8px;font-weight:bold;color:#000;border:1px solid #d85352;float:left} input.kb-follow-by-email-submit{background:#f35d5c; color:#fff;border:1px solid #d85352;cursor:pointer;padding:7px;margin:8px;transition:all 0.6s ease-in-out;font-weight:bold;float:left} .follow-by-email-social-facebook, .follow-by-email-social-twitter, .follow-by-email-social-gplus{float:right;padding:7px;margin:8px;text-decoration: none;color:#fff;} .follow-by-email-social-facebook{background:#3B5998; } .follow-by-email-social-twitter{background:#55ACEE;} .follow-by-email-social-gplus{background:#EB7352;} /* responsive */ @media only screen and (min-width:480px) and (max-width:540px){ input.kb-follow-by-email-address{margin-right:0;} input.kb-follow-by-email-submit{margin-left:0;margin-right:0;} .follow-by-email-social-twitter, .follow-by-email-social-gplus{margin-right:0px;margin-left:0px} .follow-by-email-social-facebook{margin-left:0px} } @media only screen and (max-width:479px){ .follow-by-email-social-twitter, .follow-by-email-social-gplus{width:100%; margin:0; text-align:center;} .follow-by-email-social-facebook{width:100%; margin:1px 0 0 0; text-align:center;} input.kb-follow-by-email-address{margin:0;width:100%;pading:0;border:1px solid #fff;} input.kb-follow-by-email-submit{margin:0;width:100%;pading:0} } </style>4.
Thay blogkhanh98 thành username Feeds của bạn
Thay FACEBOOK_USER_NAME thành user name Facebook của bạn
Thay TWITTER_USER_NAME thành username Twitter của bạn
Thay GP_USER_NAME thành username hay là ID Google Plus của bạn
5. Lưu mẫu lại và kiểm tra kết quả.
Mọi thắc mắc xin để lại bình luận ở dưới bài viết, nếu tiện ích này không hoạt động tốt trên template của bạn thì hãy để lại URL blog của bạn để mình có thể khắc phục.
Comments
Post a Comment
» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.