cara membuat popup email subscribe atau berlangganan blogger ringan

Hai sobat perampokgoogle selamat siang jumpa lagi ne sama ane admin blog sederhana yang membahas tutorial mengenai blogger dan optimasinya, Siang ini saya mau berbagi sedikit tutorial mengenai bagaimana cara membuat popup email subscribe blogger yang ringan karena emang tidak menggunakan javascript melainkan hanya menggunakan css saja, Bagi sobat perampok google yang sedang mencari cara untuk membuat popup ini silahkan ikutin terus postingan ini ya !

Kalau kamu pengen punya pelanggan / pembaca yang berlangganan artikel blog kamu melalui email nggak ada salahnya deh kamu pasang widget ini diblog, Caranya mudahkok.

Langkah pemasangan widget popup email subscribe blogger :

#1. Silahkan login ke dashboard blogger https:www.blogger.com
#2. Setelah masuk silahkan klik menu tema / Theme atau template.
#3. Lalu taruh kode css dibawah ini di template blogger sobat masing masing.

#popup-wrap .popup-button { background: #A1362A url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHwOLbhAHMl073MC9Lye3rf9atByQBqY_w3e4P2hdrK1KIDKHDI_WEwywXWg7U_JuBWKzjA43lIW2hwFtqwqDFdp7ZZHRhr7aUjKbI0ZYvaSRI9oMB1YmURIbi6gxZNQ2rnZVyby__4euO/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); }

#4. Setelah itu letakan kode HTML dibawah ini tepat diatas kode </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 -->

Silakan ganti tulisan YOUR_SUBSCRIBE_ID dengan user id feedburner sobat masing masing.

#5. Save / Simpan template sobat dan cek deh.

Oke sekian dulu artikel terbaru tentang blogger , Jika kamu ingin berlangganan artikel blog ini dan dikirim secara otomatis ke email kamu silahkan berlangganan ya !

semoga berguna bagi nusa dan bangsa ^_^

Search This Blog

cara membuat popup email subscribe atau berlangganan blogger ringan