Responsive Subscribe nằm dưới header cho Blogger

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

Bạn nên thêm một HTML/Javascript nằm ngay dưới header của blog

3. Dán code dưới vào

<!-- 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(&quot;http://feedburner.google.com/fb/a/mailverify?uri=blogkhanh98&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); 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.