Membuat PopUP Email Berlangganan diBlog

CARA MEMBUAT POPUP EMAIL BERLANGGANAN SUBSCRIBE DIBLOG 

Membuat PopUP Email Berlangganan 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">
  <!-- Subscribe Trigger -->
       <label class='popup-button' for='popup-trigger'></label>

  <!-- Subscribe Content -->
  <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'>
                    <!-- Opt-In Subscribe -->
                    <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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR_SUBSCRIBE_ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 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><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->
Ganti YOUR_SUBSCRIBE_ID dengan ID Feedburner anda masing-masing

4. Simpan template dan lihat hasilnya
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 


Follow Blog Orang IT dan jangan lupa Like FansPage Helmykkediri dibawah serta jangan lupa untuk klik iklan yang ada pada Blog ini.untuk biaya perawatan admin

0 Response to "Membuat PopUP Email Berlangganan diBlog"

Poskan Komentar

Terimakasih telah membaca artikel di Blog Orang IT aturan berkomentar yang baik dan benar :

1. Blog ini tidak memberikan backlink dikotak komentar karena sifatnya nofollow

2. Jika masih menyertakan link aktif tidak akan berefek apapun baik bagi blog anda maupun blog saya

3. Jika artikel postingan dirasa sudah expired atau outdate silahkan berkomentar minta diperbaharui atau hubungi admin melalui menu about

4. Berkomentar dengan relevan , usahakan komentar bermanfaat bagi pengunjung yang lain

5. Admin mengabaikan komentar anonimous

Terimakasih sekian jangan lupa Follow Blog Orang IT dan Like Fanspage Helmykkediri