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"

Posting Komentar

Terimakasih telah membaca artikel di Blog Orang IT , berikut ini aturan yang saya buat untuk pengunjung yang mau memberikan komentar :

1. Semua komentar diblog akan saya hapus setiap akhir bulan karena file backup terlalu besar

2. Komentar yang relevans akan saya setujui sementara sara rasis akan saya hapus langsung

3. Jangan spam link aktif dan url langsung karena percuma saya admin yang selektif

4. Jika ada link mati atau link yang mengarah kehalaman lain kosong 404 tolong beritahu melalui komentar

5. Anda boleh meninggalkan jejak sekedar doa atau ucapan terimakasih hal itu sudah membuat saya sangat senang dan bersemangat

6. Jika mau request judul artikel juga bisa langsung melalui kotak komentar

7. Tidak menerima kerja sama berbayar dalam bentuk apapun , jika anda ingin menyumbangkan artikel / guest post silahkan kirim melalui email tidak dipungut biaya dan anda boleh mencantumkan situs bisnis anda

Semoga anda berbesar hati untuk mentaati aturan yang saya buat dan jangan lupa kunjungi lagi Blog Orang IT esok hari

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel