Cara Menciptakan Animated Pop Up

Langsung saja ke pointnya, karna bikin artikelnya pas tengah malam :D

1. Login ke Blogger > template > Edit HTML
kemudian tambahkan Script dibawah ini

 <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

2. Tambahkan CSS berikut sebelum </style>

 @import 'https://sites.google.com/site/animasicss/pop-up/pop-up.css'; .btn-abdur { float:left; list-style:none; text-align:center; width:100%; margin:0px; padding:0px; clear:both; }  .button {   position: relative;   width: 240px;   margin: auto;   height: 70px;   display: block;   font-size: 2em;   color: #fff;   background: cornflowerblue;   border: none;   outline: none;   cursor: pointer; } .button:hover {   opacity: 0.92;   background: transparent;   color: #5282d8;   border:2px solid #5282d8;   box-shadow: none; } .overlay {   position: fixed;   top: 0;   bottom: 0;   left: 0;   right: 0;   display: none;   z-index: 1000;   background: rgba(0, 0, 0, 0.7);   -moz-transition:all 0.2s;   -webkit-transition:all 0.2s;   transition:all 0.2s; } .popup {   position: relative;   width: 32%;   margin: 200px auto;   padding: 18px;   background: #e7e7e7;   border-radius: 6px;   -moz-transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);   -webkit-transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);   transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); } .popup .heading {   margin-top: 0;   color: #333;   font-family: Tahoma, Arial, sans-serif; } .popup .close {   position: absolute;   top: 15px;   right: 32px;   font-size: 30px;   font-weight: bold;   text-decoration: none;   color: #333;   cursor: pointer;   transition: all 0.2s; } .popup .close:hover {   color: #d62222; } .popup .isi-popup {   max-height: 30%;   overflow: auto; }

3. Dan tambahkan Javascript dibawah sebelum </body>

 $(document).ready(function(){    $('.button').click(function(){     $('.overlay').css({'display':'block'});     $('.popup').addClass('animated zoomInUp');     $('.popup').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){       $('.popup').removeClass('animated zoomInUp');     });   });      $('.close').click(function(){     $('.popup').addClass('animated zoomOutUp');     $('.popup').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){       $('.popup').removeClass('animated zoomOutUp');     });     setTimeout(function(){        $('.overlay').css({'display':'none'});      }, 1017);   });  });

Untuk Demonya silahkan klik button dibawah