Pure CSS Pop Up Email Subscription Box Untuk Blogger

Halo semua, ini adalah postingan pertama saya mengenai blogger, kali ini saya akan membagikan cara membuat Pure CSS Pop Up Email Subscription Box Untuk Blogger, Simak saja ya...

Intro
Demo
Html
Css
Script
Finish

Prev Next

1. 
   

   Introduction

   Ya, seperti judulnya itu adalah Pure CSS Pop Up Email Subscription Box  tidak hanya untuk Blogger tetapi untuk hampir semua jenis platform selama Anda memiliki akses ke feedburner. widget ini adalah kombinasi dari kotak berlangganan posting email saya sebelumnya dan pop up widget sederhana dan Cool yg di buat dengan CSS. Pastikan untuk mengikuti langkah-langkah untuk membuatnya bekerja.
   
   

   Features
   

   Lightweight CSS
   
   Improved HTML
   
   Optimized Images
   
   SEO friendly
   
   Fully Customizable
   
   Flat Design
   
   Responsive

   
   
   

   Requirements
   

   FontAwesome (?)
   
   
2. 
   

   Demo

   Tidak Ada Demo
   
   
   
   
3. 
   

   Html

   
   

   Go to Blogger » Template » and Edit HTML
    dan copy code di bawah ini sebelum code </body>
   
   

   <div class='modalDialog' id='signup'>
   <div><a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
   <div class='signup-container'>
   <div class='newsletter-sm'>
   <i class='fa fa-envelope-o enve'/>
   <h3>Subscribe to Newsletter</h3>
   <p style='text-align:center'>Sign up with your email address to receive news and updates straight in your inbox.</p>
   <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=GblogKri&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
   <div class='newsletter-sm-bot'>
   <input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/>
   <button class='newsletter-button-sm' type='submit'>Subscribe</button></div>
   <input name='uri' type='hidden' value='GblogKri'/>
   </form></div></div></div></div>
   

   
   
   
   Untuk Mengaktifkan widget ini, Anda perlu menambahkan code yang akan berfungsi sebagai tombol atau handler untuk popup.
   Tambahkan kode berikut di mana saja Anda inginkan untuk ditampilkan. (Misalnya dalam menu nav Anda)
   
   

   <a href='#signup'>Signup</a>
   

   
   
   
   
   
4. 
   

   Css

    Copy and paste Code di bawah ini sebelum atau di atas code ]]></b:skin>
   
   
   

   
   .enve{background:#00aa9f;color:#fff;width:50px;height:50px;display:block;line-height:50px;text-align:center;font-size:24px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;margin:0 auto}.newsletter-sm{background:#fff;width:100%;margin:0;padding:20px}.newsletter-sm h3,.newsletter-sm p{color:#555;font-family:"Maven Pro",sans-serif}.newsletter-sm h3{font-weight:400;text-align:center;margin-bottom:10px;font-size:24px}.newsletter-sm p{font-size:14px;line-height:20px}.newsletter-sm .newsletter-input-sm{border:0;padding:5px 10px;width:360px;float:left;height:40px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9uSsXhiSQKCSPdKaTzpFvzYSaiJqybUOUAXAHMka-tjnJdz8wLA05iLoAl0Gic_LY7lV9uJHRQzGbnkt7kQzAhRJ5NXkfmiIgZ_SoI2HdIAFggPOZOk27o0D_ECkj7tokUw-Npi5TjMU/s1600/bg.png) no-repeat;padding:20px;margin:0 -20px -20px;height:40px}.newsletter-sm .newsletter-button-sm{float:right;height:40px;display:inline-block;font-size:14px;padding:5px 10px;position:relative;color:#fff;text-align:center;background:#00aa9f;border:1px solid #fff;cursor:pointer;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.modalDialog{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6);z-index:99999;opacity:0;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in;pointer-events:none}.modalDialog:target{opacity:1;pointer-events:auto}.modalDialog:target>div{margin:8% auto}.modalDialog>div{-webkit-transition:all 100ms ease-in;-moz-transition:all 100ms ease-in;transition:all 100ms ease-in;width:500px;position:relative;margin:5% auto;background:#fff;min-height:200px}h2.signup{background:#00aa9f;border-bottom:1px solid #008d84;font-weight:400;text-align:center;padding:10px;color:#fff;font-size:18px}.close{color:#888;position:absolute;top:1px;right:1px;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px}.close:hover{text-decoration:none;color:#555}
   

   
   
   
   
5. 
   

   Script

   Tidak ada Script Di perlukan
   
   
   
   
   
   
   
6. 
   

   Finish

   
   

    Replace GblogKri with your feedburner url.
   
   Dibutuhkan beberapa penyesuaiyan agar sesuai dengan kebutuhan anda.
   Saya harap anda Menyukainya :)..Oke Until next time. Happy Blogging! :)