Membuat OnClick PopUp Email Subscription Box Widget pada Blogger

Membuat OnClick PopUp Email Subscription Box pada Blogger

Ada banyak Email Subscription Box di luar sana yang sudah di jelaskan tutorialnya oleh banyak blog. Sebelumnya blog Wahyu Pratama pun juga pernah memberikan tutorial mengenai email subscription box.

Baca juga :  Membuat Kotak Berlangganan (Subscription Box) di Bawah Posting Blog

Kali ini saya ingin membahas mengenai PopUp Email Subscription Box Widget yang saat ini sudah terpasang pada banyak blog. Terkadang pengunjung sangat kesal dengan adanya widget ini (termasuk saya). Karena widget ini akan mengganggu si pengunjung ketika sedang membaca artikel pada sebuah blog.

Nah sebagai blogger yang mengutamakan kenyamanan pengunjung, ada baiknya Anda mengatasi hal ini tanpa menghilangkan PopUp Email Subscription Box Widget pada blog Anda. Solusinya adalah OnClick PopUp Email Subscription Box Widget.

Jadi widget tersebut akan tampil ketika tombolnya diklik oleh pengunjung. Dan yang lebih kerennya lagi, widget ini dibuat hanya dengan kode CSS dan HTML saja. Tidak seperti PopUp Email Subscription di luar sana yang kebanyakan menggunakan JQuery.

Hal ini tentunya bagus untuk memperingan loading blog, selain itu pengunjung juga tetap nyaman untuk membaca artikel blog Anda. Dan ketika pengunjung ingin berlangganan via email tinggal klik tombol yang tersedia. Untuk demo silahkan klik tombol di bawah ini.

Lihat ikon pada sisi kiri bawah blog ini.

Subscribe Via Email Subscribe to our newsletter to get the latest updates to your inbox. 😉

Your email address is safe with us!

Untuk membuatnya silahkan ikuti langkah-langkahnya di bawah ini.

Membuat OnClick PopUp Email Subscription Box pada Blogger

1. Buka Blogger > Template > Edit HTML
2. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin>

/***** OnClick PopUp Email Subscription Form 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; overflow: hidden;}
#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. Selanjutnya letakkan kode berikut ini di atas 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 -->

Ganti YOUR_SUBSCRIBE_ID dengan ID Feedburner Anda (kode YOUR_SUBSCRIBE_ID ada dua, jadi Anda harus mengganti dua kali).

4. Simpan template

Silahkan lihat hasilnya, sekarang buka blog Anda, Anda akan melihat ikon pesan di sisi kiri bawah blog Anda. Klik ikon tersebut maka PopUp Email Subscription Box Widget akan muncul.

Leave a Reply