Senin, 24 Oktober 2016

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...

Pure CSS Pop Up Email Subscription Box Untuk Blogger








  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! :)





Tidak ada komentar:
Write komentar