Hộp Subscription thông minh cho blog

Bài viết này mình sẽ hướng dẫn các bạn cách tạo hộp đăng ký theo dõi blog mà chỉ khi độc giả nhập đúng địa chỉ email mới hiển thị nút OK để xác nhận. Các bạn có thể xem demo bên dưới để rõ hơn về thủ thuật mình sẽ giới thiệu sau đây, nhân tiện bạn nào chưa đăng ký theo dõi thì theo dõi luôn nhé, kkk.

HTML

<form action="http://feedburner.google.com/fb/a/mailverify" class="newsletter" id="newsletter" autocomplete="off" novalidate method="post" onsubmit="window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=trollvl&quot;,&quot;popupwindow&quot;,&quot;scrollbars=yes,width=550,height=520&quot;);return true" target="popupwindow">
<input type="email" name="email" value="Enter your email address" placeholder="Enter your email address" tabindex="1" class="newsletter-email" onblur="if(this.value==&quot;&quot;){this.value=this.defaultValue}" onfocus="if(this.value==this.defaultValue){this.value=&quot;&quot;}"/>
<input type="submit" value="OK" tabindex="2" class="newsletter-submit" />
<input name="uri" type="hidden" value="trollvl">
<input name="loc" type="hidden" value="en_US">
</form>

Các bạn nhớ thay trollvl thành ID link Feed của blog của mình nhé. Nếu chưa rõ về Feed các bạn có thể tham khảo bài viết này

CSS

Sử dụng đoạn CSS sau để tạo giao diện cho khung Subscription. Bạn cũng có thể tùy chỉnh giao diện theo ý thích nếu hiểu rõ về CSS

input{font-size:100%;font-family:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;vertical-align:baseline;border:0;outline:0;padding:0;margin:0}
.newsletter{width:350px;height:50px;font-size:20px;position:relative;color:#ffde00;background-color:#63614c;border:2px solid transparent}
.newsletter input{-webkit-transition:color .25s ease,background-color .25s ease,border-color .25s ease;-moz-transition:color .25s ease,background-color .25s ease,border-color .25s ease;-ms-transition:color .25s ease,background-color .25s ease,border-color .25s ease;-o-transition:color .25s ease,background-color .25s ease,border-color .25s ease;transition:color .25s ease,background-color .25s ease,border-color .25s ease}
.newsletter-email{height:100%;padding:0 0 0 10px;white-space:nowrap;overflow:hidden;-webkit-text-overflow:ellipsis;-moz-text-overflow:ellipsis;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;width:340px}
.newsletter-email::-webkit-input-placeholder{color:#a49c54 !important}
.newsletter-email:-moz-placeholder{color:#a49c54 !important}
.newsletter-email::-moz-placeholder{color:#a49c54 !important}
.newsletter-email:-ms-input-placeholder{color:#a49c54 !important}
.newsletter-email:hover{border-color:#494736}
.newsletter-email:focus{color:#494736;background-color:transparent;border-color:#494736}
.newsletter-submit{height:100%;font-weight:700;color:#ffde00;background-color:#494736;display:none;position:absolute;top:0;right:0;padding:0 1.25rem;/* 20 */ -webkit-animation:appear-from-inside .25s ease,fade-in .25s linear;-moz-animation:appear-from-inside .25s ease,fade-in .25s linear;-o-animation:appear-from-inside .25s ease,fade-in .25s linear;animation:appear-from-inside .25s ease,fade-in .25s linear;-webkit-transform-origin:right center;-moz-transform-origin:right center;-o-transform-origin:right center;transform-origin:right center}
.newsletter-submit:hover,.newsletter-submit:focus{color:#fff}
.newsletter--active .newsletter-submit{display:block}
@-webkit-keyframes appear-from-inside{from{-webkit-transform:scale( 0 )}
75%{-webkit-transform:scale( 1.1 )}
to{-webkit-transform:scale( 1 )}
}
@-moz-keyframes appear-from-inside{from{-moz-transform:scale( 0 )}
75%{-moz-transform:scale( 1.1 )}
to{-moz-transform:scale( 1 )}
}
@-o-keyframes appear-from-inside{from{-o-transform:scale( 0 )}
75%{-o-transform:scale( 1.1 )}
to{-o-transform:scale( 1 )}
}
@keyframes appear-from-inside{from{transform:scale( 0 )}
75%{transform:scale( 1.1 )}
to{transform:scale( 1 )}
}

Javascript

;( function( window, document, undefined )
{
 'use strict';

 var form  = '.newsletter',
  className = 'newsletter--active',
  email  = 'input[type="email"]',

  addEventListener = function( element, event, handler )
  {
   element.addEventListener ? element.addEventListener( event, handler ) : element.attachEvent( 'on' + event, function(){ handler.call( element ); });
  },
  forEach = function( elements, fn )
  {
   for( var i = 0; i < elements.length; i++ ) fn( elements[ i ], i );
  },
  addClass = function( element, className )
  {
   element.classList ? element.classList.add( className ) : element.className += ' ' + className;
  },
  removeClass = function( element, className )
  {
   element.classList ? element.classList.remove( className ) : element.className += element.className.replace( new RegExp( '(^|\\b)' + className.split( ' ' ).join( '|' ) + '(\\b|$)', 'gi' ), ' ' );
  };

 forEach( document.querySelectorAll( form ), function( $form )
 {
  var $email = $form.querySelectorAll( email );

  if( $email.length )
  {
   $email = $email[ 0 ];
   addEventListener( $email, 'keyup', function()
   {
    $email.value != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( $email.value ) ? addClass( $form, className ) : removeClass( $form, className );
   });
  }
 });
})( window, document );

/*

jQuery version:

;( function( $, window, document, undefined )
{
 'use strict';

 var form  = '.newsletter',
  className = 'newsletter--active',
  email  = 'input[type="email"]';

 $( form ).each( function()
 {
  var $form = $( this ),
   $email = $form.find( email );

  $email.on( 'keyup.addClassWhenEmail', function()
  {
   $form.toggleClass( className, $email.val() != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( $email.val() ) );
  });
 });
})( jQuery, window, document );

*/

Chúc bạn thành công và đừng quên để lại nhận xét, chia sẻ đến bạn bè nha!

Tham khảo từ http://osvaldas.info/