#Bacalah, Widget Auto PopUp simple dalam Blog
Dalam hal ini mengindikasikan informasi yang disampaikan secara akurat
Bacalah pada tutorial blog ini akan membahas mengenai cara membuat popup hanya dengan menggunakan CSS3 murni, tanpa javascript maupun jquery sedikitpun sehingga tidak akan membuat loading lama.
Widget auto Popup
Kelebihan lain membuat popup tanpa javascript adalah popup ini tetap akan berjalan bahkan ketika browser pengguna tidak mengaktifkan javascript.
Kelemahannya, pada browser-browser yang jadul, popup ini tidak akan muncul karena popup ini menggunakan teknik Pseudo class :target, CSS3 animation dan CSS3 transition.
Widget Auto Pop simple dalamBlog
Untuk melihat browser support mengenai CSS3 animation, silahkan
Seperti yang sudah kita ketahui bersama, popup digunakan pada sebuah website untuk mendorong Up simple dalam Blogpengguna melakukan sesuatu yang kita inginkan,
Seperti saat berlangganan, klik like facebook, follow twitter dan sebagainya. Sayangnya, resiko penggunaan popup ini biasanya tidak user-friendly.
Artinya, kebanyakan pengunjung tidak suka dengan popup, terutama autopopup.
Oleh Karena itu, semua popup pada tutorial ini telah dibuat dengan desain yang sesimple dan senyaman mungkin untuk pengunjung, agar meminimalisir bounce rate yang disebabkan oleh popup yang digunakan.
Berikut ini adalah popup yang bisa kamu gunakan pada blog atau website Silahkan dipilih sesuai kebutuhan.
Manual Popup (Modal) Popup ini merupakan popup manual yang akan muncul jika pengunjung mengklik tombol.
Bisa digunakan untuk pengisian seperti survey, form berlangganan dan sebagainya.
Sedangkan pada demo, ada 2 versi popup yang bisa anda gunakan, yaitu versi terang dan gelap.
Menambahkan Popup CSS3 Pada Blogspot/Blogger
1. Login ke blogger dashboard > Pilih Blog > Template > Edit HTML
2. Pastekan CSS untuk popup (ada diatas) dan CSS untuk isi popup tersebut tepat diatas kode ]]> < /body >
3. Pastekan HTML untuk popup (yang isinya sudah di ganti dengan isi popup anda) dibawah kode
4. Jika yang kamu gunakan adalah popup manual,
>> kode ‘Klik untuk memunculkan Popup’ di tempatkan pada widget HTML saja.
>>Lalu ganti teksnya sesuai kebutuhan.
5. Save pengeditan template kamu
<a href=”#popup” class=”popup-link”>Klik untuk memunculkan Popup</a>
<div class=”popup-wrapper” id=”popup”>
<div class=”popup-container”><!– Konten popup, silahkan ganti sesuai kebutuhan –>
<form action=”https://www.bacalah.biz/id//2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html#” method=”post” class=”popup-form”>
<h2>Ikuti Update !!</h2>
<p>Daripada hanya melihat demo untuk popup-nya saja, lebih baik masukkan juga email anda agar mendapatkan pemberitahuan saat ada update posting menarik lain seperti ini.<br/>
<strong>Percayalah, saya hanya akan mengirim sesuatu yang bermanfaat untuk anda :)</strong></p>
<div class=”input-group”>
<p><input type=”email” name=”email” placeholder=”Email Address”></p>
<p>
<input type=”hidden” name=”action” value=”subscribe”>
<input type=”hidden” name=”source” value=”https://www.devaradise.com/id//2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html”>
<input type=”hidden” name=”sub-type” value=”widget”>
<input type=”hidden” name=”redirect_fragment” value=”blog_subscription-2″>
<input type=”hidden” id=”_wpnonce” name=”_wpnonce” value=”aaf0b68fcd”>
<input type=”submit” value=”Submit” name=”jetpack_subscriptions_widget”>
</p>
</div>
</form>
<!– Konten popup sampai disini–><a class=”popup-close” href=”#closed”>X</a>
</div>
</div>
Ikuti step by step kemudahan buat Auto PopUp dilain settingan ini.
Jadi, gunakanlah auto popup dengan bijak, agar tetap memberikan kenyamanan dan manfaat bagi pengunjung.
<div class=”popup-container”><!– Konten popup, silahkan ganti sesuai kebutuhan –>
<form action=”https://www.bacalah.biz/id//2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html#” method=”post” class=”popup-form”>
<h2>Ikuti Update !!</h2>
<p>Daripada hanya melihat demo untuk popup-nya saja, lebih baik masukkan juga email anda agar mendapatkan pemberitahuan saat ada update posting menarik lain seperti ini.<br/>
<strong>Percayalah, saya hanya akan mengirim sesuatu yang bermanfaat untuk anda :)</strong></p>
<div class=”input-group”>
<p><input type=”email” name=”email” placeholder=”Email Address”></p>
<p>
<input type=”hidden” name=”action” value=”subscribe”>
<input type=”hidden” name=”source” value=”https://www.devaradise.com/id//2015/01/tutorial-membuat-popup-tanpa-javascript-jquery.html”>
<input type=”hidden” name=”sub-type” value=”widget”>
<input type=”hidden” name=”redirect_fragment” value=”blog_subscription-2″>
<input type=”hidden” id=”_wpnonce” name=”_wpnonce” value=”aaf0b68fcd”>
<input type=”submit” value=”Submit” name=”jetpack_subscriptions_widget”>
</p>
</div>
Gunakanlah Auto PopUp dengan bijak , agar tetap memberikan kenyamanan dan mamfaat bagi pengunjung website .
