Hộp follow by email kiểu popup

Hộp Follow by email thì các bạn đã thấy rất nhiều, đa phần chúng đều nằm trên sidebar. Hôm nay, mình xin giới thiệu với các bạn một mẫu mới theo dạng popup, trông khá là lạ mắt.

VIEW DEMO

#Thêm HTML/Javascrip

1. Đăng nhập Blogger
2. > Bố cục > Thêm tiện ích > HTML/Javascip
3. > Dán code dưới vào và save lại

<style type="text/css">

/*<![CDATA[*/

 #w2bfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}

 .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}

 .w2bfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}

 .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_hMzQKlU_kJbC6nN566tvZfsVgtyEXncYWDVi85ODpY2RoqjU6XuCzVtJvXqAtaBOV7nEkNZVfg9hENr2nMdJhPp_5mmyG0NIvfku6_haaqdLW9V45gitUGd8yIYBXjQ8dLyuFJNoVFI6/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}

 .w2bfollowButton:hover,.followActive {color: #fff !important;}

 .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}

 .followactive {background-color: #333;}

 .w2bfollowForm {padding: 15px;}

 .w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}

 .w2bfollowForm p {margin: 0 0 10px;}

 .w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}

 .w2bfollowForm form {text-align: center;}

 .w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}

 .w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}

 .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}

 .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}

 .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}

 .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}

 .w2bFollowFooter a:hover {color: #fff;background: none;}

/*]]>*/

</style>

<script type="text/javascript">

/*<![CDATA[*/

;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);

/*]]>*/

</script>

<div id="w2bfollowSubscribe" style="display:none;">

 <div class="w2bfollowForm">

  <a class="w2bfollowButton" href="#" title="Follow"><span>Follow</span></a>

  <h3>Theo dõi qua email</h3>

  <p>Hãy đăng ký để nhận bài viết mới nhất của Khánh Blog</p>

  <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogkhanh98', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

   <input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>

   <input type="hidden" value="blogkhanh98" name="uri"/>

   <input type="hidden" name="loc" value="en_US"/>

   <input type="submit" value="Subscribe" class="emailSubmit"/>

  </form>

  <p class="w2bFollowFooter">

   <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>

  </p>

 </div>

</div>

Lưu ý:

• Thay phần màu xanh cho phù hợp, nó là nội dung hiển thị ra màn hình
• Thay phần màu vàng thành ID Feed hoặc RSS của bạn