Ada banyak widget berlangganan email Popup untuk blogger di luar sana yang diterbitkan oleh banyak blog termasuk JuaraPost. Tapi widget aku penerbitan hari ini hanya didasarkan pada CSS3 dan HTML5.
Klik pada link live demo untuk melihat di demo
Tambahkan OnClick PopUp Email Formulir Berlangganan Untuk Blogger Dengan Cara Berikut Ini:
Menambahkan Kode CSS:
1. Pada Dashboard Blogger Masuk ke Template > Edit HTML
2. Klik di dalam Editor HTML , Tekan CTRL + F
3. Sekarang mencari
]]></b:skin>]]></b:skin> 5. Lalu klik simpan template
/***** OnClick PopUp Email Subscription Form CSS *****/
#popup-wrap .popup-button { background: #A1362A url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqYgRzqw7PHYnXBXzct_tfFt2GYNG9dWJe7hjazCfS3hclS2eptfNryHYhSzpOi25bcGpiTtvsjxbIqe5yOe3ShNq1OVWl3jGcijXXBEukIBDL10o0nFChq5MwfniPyi01visIyAxbYkk1/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); }
Menambahkan bentuk Berlangganan Email kode HTML:
1. Pada Dashboard Blogger Masuk ke Template > Edit HTML
2. Klik di dalam Editor HTML , Tekan CTRL + F
3. Sekarang mencari
</body></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('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><!-- .popup-form -->
</div><!-- .popup-bg -->
</div><!-- #popup-wrap -->
Dalam kode HTML di atas, Cari YOUR_SUBSCRIBE_ID dan silahkan ganti dengan nama pengguna Feedburner Anda ( Anda akan menemukan YOUR_SUBSCRIBE_ID dua kali , berarti Anda harus menggantinya dua kali )
Username untuk pakan feedburner Anda dapat ditemukan pada akhir URL feed Anda. Sebagai contoh, URL feedburner untuk JuaraPost adalah http://feeds.feedburner.com/JuaraPost , dengan JuaraPost sebagai username.
Semua Selesai , Sekarang buka blog Anda, Anda akan melihat ikon pesan di sisi kiri bawah blog Anda , klik akan membuka widget .
Post By : 
0 komentar