Membuat PopUP Email Berlangganan diBlog

CARA MEMBUAT POPUP EMAIL BERLANGGANAN SUBSCRIBE DIBLOG

Selamat Datang di Blog Orang IT . Postingan saya kali ini saya akan share tutorial ringan mengenai bagaimana cara membuat popup email berlangganan atau subscribe diblog dengan mudah dan yang pastinya ringan karena saya tidak menggunakan javascript melainkan hanya menggunakan css saja sehingga tidak akan mempengaruhi loading blog anda

Apasih email subscribe / berlanggana

Email berlangganan subscribe merupakan suatu cara dimana visitor yang ingin selalu mendapatkan update terbaru dari artikel blog anda mendaftarkan email mereka untuk berlangganan kabar terbaru , jadi jika blog anda update artikel baru mereka secara otomatis akan mendapatkan pemberitahuan dan artikel dikirim yang bisa langsung dibaca lewat email mereka ( tergantung settingan Feed nya apakah dibuat sebagian atau full )

Bayangkan saja jika anda sebagai visitor blog yang sangat suka membaca artikel tentang ruqyah dan tidak ingin ketinggalan update dari blog quranichealing , anda akan mendaftarkan alamat email anda untuk berlangganan pada kotak subscribe mereka sehingga saat ada update artikel terbaru anda bisa membaca nya langsung melalui email

Kali ini saya berikan tutorial singkat mengenai cara memasang widget popup email berlangganan subscribe diblog yang ringan

1. Buka dashboard blogger - template - sesuaikan

2. Taruh kode css berikut ini didalam template edit html atau sesuaikan tambahkan css

#popup-wrap .popup-button { background: #A1362A url("http://2.bp.blogspot.com/-5BeaRyWo6FQ/Vc9zn8NV2oI/AAAAAAAADU0/tGTO9XGumUs/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 80px; left: 25px; position: fixed; width: 80px; z-index: 99999; }
#popup-wrap .popup-button:hover { background-color: #70261D; }

#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; }
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }

#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #cc6055; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox,
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #70261D; }

#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #70261D; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

3. Setelah itu tempelkan kode popup ini diatas </body>

<div id="popup-wrap">

       <label class='popup-button' for='popup-trigger'></label>


<input class='popup-trigger' id='popup-trigger' type='checkbox'/>
<div class='popup-bg'>
            <label class='popup-bg-close' for='popup-trigger' id='popup-close'></label>
            <div class='popup-form'>
                <label class='popup-form-close' for='popup-trigger' id='popup-close'></label>
                <div class='popup-inner'>
                    
                    <span class="popup-title">Subscribe Via Email</span>
                    <span class="popup-content">Subscribe to our newsletter to get the latest updates to your inbox. ;-)</span>
                    <br/><br/>
                    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR_SUBSCRIBE_ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='YOUR_SUBSCRIBE_ID'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input id='mailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' required='' type='text' value='Enter your email...'/>
                        <input id='subbutton' title='' type='submit' value='Sign up'/>
                    </form>
                    <br />
                    <span class="popup-footer">Your email address is safe with us!</span>
                </div>
            </div>
</div>
    </div>

Ganti YOUR_SUBSCRIBE_ID dengan ID Feedburner anda masing-masing

4. Simpan template dan lihat hasilnya

Baca juga : Membuat email berlangganan diblogger

Demikian postingan mengenai cara membuat popup email berlangganan diblog semoga bermanfaat , jika ada pertanyaan silahkan ditanyakan lebih lanjut terimakasih sudah sudah berkunjung dan sekian semoga berhasil menerapkan cara diatas

Blog Orang IT

Search This Blog