Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Cara Membuat Popup/Modal dengan CSS3 Murni (Tanpa Javascript/Jquery)

Form Berlangganan

Halo kawan, Pada posting kali ini saya akan membahas mengenai tutorial membuat popup hanya dengan menggunakan CSS3 murni, tanpa javascript maupun jquery sedikitpun sehingga tidak akan membuat loading lama.

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. Untuk melihat browser support mengenai CSS3 animation, silahkan baca posting ini : Mengenal CSS3 Animation.Logan live streaming film

Seperti yang sudah kita ketahui bersama, popup digunakan pada sebuah website untuk mendorong pengguna melakukan sesuatu yang kita inginkan, seperti 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 saya buat 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 anda gunakan pada blog atau website anda. 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. Pada demo, ada 2 versi popup yang bisa anda gunakan, yaitu versi terang dan gelap.

Popup dark skin

Popup Light Skin

<div id=”closed”></div>
<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.devaradise.com/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>
– Kode yang ada diantara <!– Konten popup, silahkan ganti sesuai kebutuhan –>  dan <!– Konten popup sampai disini–> silahkan ganti dengan konten popup yang anda inginkan.
a.popup-link {
padding:17px 0;
text-align: center;
margin:7% auto;
position: relative;
width: 300px;
color: #fff;
text-decoration: none;
background-color: #FFBA00;
border-radius: 3px;
box-shadow: 0 5px 0px 0px #eea900;
display: block;
}
a.popup-link:hover {
background-color: #ff9900;
box-shadow: 0 3px 0px 0px #eea900;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}
/* end link popup*//*style untuk popup */
#popup {
visibility: hidden;
opacity: 0;
margin-top: -200px;
}
#popup:target {
visibility:visible;
opacity: 1;
background-color: rgba(255,255,255,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 99999999999;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #333;
color:#fff;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #fff;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#333;
}/* style untuk isi popup */.popup-form {
margin:10px auto;
}
.popup-form h2 {
margin-bottom: 5px;
font-size: 37px;
text-transform: uppercase;
}
.popup-form .input-group {
margin:10px auto;
}
.popup-form .input-group input {
padding:17px;
text-align: center;
margin-bottom: 10px;
border-radius:3px;
font-size: 16px;
display: block;
width: 100%;
}
.popup-form .input-group input:focus {
outline-color:#FB8833;
}
.popup-form .input-group input[type=”email”] {
border:0px;
position: relative;
}
.popup-form .input-group input[type=”submit”] {
background-color: #FB8833;
color: #fff;
border: 0;
cursor: pointer;
}
.popup-form .input-group input[type=”submit”]:focus {
box-shadow: inset 0 3px 7px 3px #ea7722;
}
Kode Diatas adalah kode untuk versi popup dengan warna gelap, dan background terang. Untuk mengubah popup-nya menjadi warna terang dan background gelap, ganti kode kode berikut ini.
rgba(255,255,255,0.7) ganti menjadi rgba(0,0,0,0.7). Ini adalah css untuk warna background overlay popup.
#fff ganti menjadi #333. ini adalah css untuk warna teks dan warna icon close.
#333 ganti menjadi #fafafa. ini adalah css untuk warna background popup-nya.Untuk style isi popup, anda bisa mengubahnya sesuka hati. Ini tidak akan berpengaruh pada berjalannya popup.
600px adalah ukuran lebar popup. Silahkan sesuaikan sendiri.

Auto Popup


Saya yakin, anda pasti sering melihat auto popup saat membuka situs-situs tertentu. Auto popup adalah popup yang muncul secara otomatis saat kita membuat halaman suatu web. Biasanya berisi promosi produk terbaru, iklan, dan sebagainya. Namun, biasanya autopopup tidak disukai oleh pengunjung, apalagi jika autopopup itu sangat lama dan tidak bisa di close. Jadi, gunakanlah auto popup dengan bijak, agar tetap memberikan kenyamanan dan manfaat bagi pengunjung.

<div class=”popup-wrapper” id=”popup”>
<div class=”popup-container”><!– Konten popup, silahkan ganti sesuai kebutuhan –>
<form action=”https://www.devaradise.com/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=”#popup”>X</a>
</div>
</div>
Kode yang berada diantara <!– Konten popup, silahkan ganti sesuai kebutuhan –> dan <!– Konten popup sampai disini–>  silahkan anda ganti dengan kode untuk isi popup anda.
/* style untuk link popup */
a.popup-link {
padding:17px 0;
text-align: center;
margin:10% auto;
position: relative;
width: 300px;
color: #fff;
text-decoration: none;
background-color: #FFBA00;
border-radius: 3px;
box-shadow: 0 5px 0px 0px #eea900;
display: block;
}
a.popup-link:hover {
background-color: #ff9900;
box-shadow: 0 3px 0px 0px #eea900;
-webkit-transition:all 1s;
transition:all 1s;
}
/* end link popup*/
/* animasi popup */@-webkit-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@-moz-keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
@keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
/* end animasi popup */
/*style untuk popup */
#popup {
background-color: rgba(0,0,0,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
-webkit-animation:autopopup 2s;
-moz-animation:autopopup 2s;
animation:autopopup 2s;
}
#popup:target {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
opacity: 0;
visibility: hidden;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #fafafa;
color:#333;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #333;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#fff;
}
/* end style popup *//* style untuk isi popup */
.popup-form {
margin:10px auto;
}
.popup-form h2 {
margin-bottom: 5px;
font-size: 37px;
text-transform: uppercase;
}
.popup-form .input-group {
margin:10px auto;
}
.popup-form .input-group input {
padding:17px;
text-align: center;
margin-bottom: 10px;
border-radius:3px;
font-size: 16px;
display: block;
width: 100%;
}
.popup-form .input-group input:focus {
outline-color:#FB8833;
}
.popup-form .input-group input[type=”email”] {
border:0px;
position: relative;
}
.popup-form .input-group input[type=”submit”] {
background-color: #FB8833;
color: #fff;
border: 0;
cursor: pointer;
}
.popup-form .input-group input[type=”submit”]:focus {
box-shadow: inset 0 3px 7px 3px #ea7722;
}
/* end style isi popup */
Style untuk auto popup ini menggunakan popup dengan warna terang dan background gelap. Untuk menggantinya silahkan ikuti petunjuk di bawah kode css pada manual popup.

Pada auto popup, saya menggunakan CSS3 animation agar ada efek transisi. Sedangkan pada manual popup saya menggunakan CSS3 transition. Bagi anda yang tertarik mempelajari lebih dalam trik css ini, silahkan download keseluruhan filenya di bawah.

Silahkan edit-edit dan modifikasikan sendiri. Anda juga bisa membuat karya-karya lain dengan trik CSS3 animation dan pseudo class :target.

Mengimplementasikan Pada Blogger & WordPress

Sejujurnya, posting ini lebih dikhususkan pada web designer atau front-end web developer yang tertarik untuk mengeksplorasi lebih dalam mengenai teknik-teknik CSS. Namun, karena pengunjung blog ini juga banyak dari kalangan blogger, jadi saya berikan tutorial bagaimana mengimplementasikannya pada blog.

Sebelum memasangnya pada blog anda, pertama-tama anda harus menentukan dulu apa tujuan popup tersebut. Akan diisi dengan apa popup tersebut.  Anda bisa mengisinya dengan facebook like box, twitter follower box, dan sebagainya. Dapatkan terlebih dahulu kode untuk isi popup tersebut. Setelah itu, silahkan ikuti langkah dibawah ini :

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 ]]></b:skin>
3. Pastekan HTML untuk popup (yang isinya sudah di ganti dengan isi popup anda) dibawah kode <body>.
4. Jika yang anda gunakan adalah popup manual, kode ‘<a href=”#popup” class=”popup-link”>Klik untuk memunculkan Popup</a>’ di tempatkan pada widget HTML saja. Lalu ganti teksnya sesuai kebutuhan.
5. Save pengeditan template anda.

Menambahkan Popup CSS3 pada WordPress Self hosted

1. Login ke Dashboard > Appeareance > Editor
2. Pilih file header.php
3. Pastekan CSSuntuk popup (ada diatas) dan CSS untuk isi popup tersebut pada diantara kode <style> dan </style>. Jika tidak ada kode tersebut, buatlah sendiri dibawah kode </title>.
4. Pastekan HTML untuk popup (yang isinya sudah di ganti dengan isi popup anda) dibawah kode <body>.
5. Klik save.
6. Ikuti langkah 4 jika popup yang anda inginkan tampil di seluruh halaman. Tapi, Jika popup ingin tampil di halaman utama saja, lewatkan langkah 4 dan ikuti langkah 7-8 dibawah.
7. Pilih file index.php
8. Pastekan HTML untuk popup (yang isinya sudah di ganti dengan isi popup anda) dibagian paling atas, atau paling bawah. Lalu, Klik save.
9. Sama seperti pada blogspot, Jika yang anda gunakan adalah popup manual, kode ‘<a href=”#popup” class=”popup-link”>Klik untuk memunculkan Popup</a>’ di tempatkan pada widget HTML saja. Lalu ganti teksnya sesuai kebutuhan.

Bagaimana menurut anda? share jika artikel ini bermanfaat 🙂

~Muhammad Syakirurohman~

English Version

123 thoughts on “Cara Membuat Popup/Modal dengan CSS3 Murni (Tanpa Javascript/Jquery)

Tinggalkan Balasan