Cara menggunakan buat modal dengan css

Hallo sobat, Pada postingan kali ini saya akan membahas tutorial membuat popup hanya dengan menggunakan css3 murni, tanpa javascript atau jquery sama sekali agar tidak loading lama

Keuntungan lain dari membuat popup tanpa javascript adalah popup ini akan tetap berjalan meskipun browser pengguna tidak mengaktifkan javascript. Kekurangannya adalah pada browser lama, popup ini tidak akan muncul karena popup ini menggunakan teknik kelas Pseudo. target, animasi CSS3 dan transisi CSS3. Untuk melihat dukungan browser untuk animasi CSS3, silakan baca postingan ini. Kenali Animasi CSS3. Film streaming langsung Logan

Seperti yang sudah kita ketahui bersama, popup digunakan pada sebuah website untuk mendorong pengguna melakukan sesuatu yang kita inginkan, seperti subscribe, klik like facebook, follow twitter dan lain sebagainya. Sayangnya, resiko menggunakan popup ini biasanya tidak user-friendly. Artinya, kebanyakan pengunjung tidak menyukai popup, terutama popup otomatis

Oleh karena itu, semua popup pada tutorial ini saya buat dengan desain sesederhana dan senyaman mungkin bagi pengunjung, guna meminimalisir bounce rate yang diakibatkan oleh popup yang digunakan. Berikut ini adalah popup yang bisa Anda gunakan pada blog atau website Anda. Silahkan pilih sesuai kebutuhan

Posting Daftar Isi

Munculan Manual (Modal)

Popup ini merupakan popup manual yang akan muncul jika pengunjung mengklik tombol tersebut. Dapat digunakan untuk mengisi survey, formulir berlangganan dan sebagainya. Pada demonya terdapat 2 versi popup yang bisa anda gunakan yaitu versi terang dan gelap

– Kode yang ada diantara   dan  silahkan ganti dengan konten popup yang anda inginkan.

a. tautan munculan {
lapisan. 17px 0;
perataan teks. tengah;
margin. 7% otomatis;
posisi. relatif;
lebar. 300px;
warna. #fff;
dekorasi teks. tidak ada;
warna latar belakang. #FFBA00;
radius perbatasan. 3px;
bayangan kotak. 0 5px 0px 0px #eea900;
menampilkan. blok;
}
a. tautan popup. arahkan {
warna latar belakang. #ff9900;
bayangan kotak. 0 3px 0px 0px #eea900;
-webkit-transisi. semua 1;
-moz-transisi. semua 1;
transisi. semua 1;
}
/* end link popup*//*gaya untuk popup */
#muncul {
visibilitas. tersembunyi;
kegelapan. 0;
margin-atas. -200px;
}
#muncul. target {
visibilitas. bisa dilihat;
kegelapan. 1;
warna latar belakang. rgba(255,255,255,0. 7);
posisi. tetap;
atas. 0;
kiri. 0;
Baik. 0;
bawah. 0;
margin. 0;
z-index. 99999999999;
-webkit-transisi. semua 1;
-moz-transisi. semua 1;
transisi. semua 1;
}@media (min-lebar. 768px){
wadah popup {
lebar. 600 piksel ;
}
}
@media (maks-lebar. 767px){
wadah popup {
lebar. 100%;
}
}
wadah popup {
posisi. relatif;
margin. 7% otomatis;
lapisan. 30px kali 50px;
warna latar belakang. #333 ;
warna. #fff ;
radius perbatasan. 3px;
}sebuah. munculan-tutup {
posisi. mutlak;
atas. 3px;
Baik. 3px;
warna latar belakang. #fff ;
lapisan. 7px kali 10px;
ukuran huruf. 20px;
dekorasi teks. tidak ada;
tinggi garis. 1;
warna. #333 ;
}/* gaya untuk konten popup */. formulir munculan {
margin. 10px otomatis;
}
bentuk popup h2 {
margin-bawah. 5px;
ukuran huruf. 37px;
transformasi teks. huruf besar;
}
popup-form. grup masukan {
margin. 10px otomatis;
}
popup-form. input-grup input {
lapisan. 17px;
perataan teks. tengah;
margin-bawah. 10px;
radius perbatasan. 3px;
ukuran huruf. 16px;
menampilkan. blok;
lebar. 100%;
}
popup-form. masukan-masukan kelompok. fokus {
garis-warna. #FB8833;
}
popup-form. masukan grup masukan[type=”email”] {
berbatasan. 0px;
posisi. relatif;
}
popup-form. masukan grup masukan[type=”kirim”] {
warna latar belakang. #FB8833;
warna. #fff;
berbatasan. 0;
kursor. petunjuk;
}
popup-form. masukan grup masukan[type=”kirim”]. fokus {
bayangan kotak. inset 0 3px 7px 3px #ea7722;
}

Kode diatas adalah kode untuk versi popup dengan warna gelap, dan background terang. Untuk mengubah popup menjadi warna cerah dan latar belakang gelap, ganti kode berikut
– rgba(255.255.255,0. 7) ubah ke rgba(0,0,0,0. 7). Ini adalah css untuk warna latar overlay popup.
– #fff ubah ke #333. ini adalah css untuk warna teks dan warna ikon tutup.
– #333 ubah menjadi #fafafa. Ini adalah css untuk warna latar popup. Untuk gaya konten popup, Anda dapat mengubahnya sesuka Anda. Ini tidak akan mempengaruhi jalannya popup.
– 600px adalah ukuran lebar popup. Silakan sesuaikan sendiri.

Munculan Demo 1 Munculan Demo 2

Munculan Otomatis

Saya yakin, Anda pasti sering melihat auto popup saat membuka situs tertentu. Auto popup adalah popup yang muncul secara otomatis pada saat kita membuat suatu halaman web. Biasanya berisi tentang promosi produk terbaru, iklan, dan sebagainya. Namun biasanya autopopup tidak disukai oleh pengunjung, apalagi jika autopopupnya sangat panjang dan tidak bisa ditutup. Jadi, gunakan auto popup dengan bijak, agar tetap memberikan kemudahan dan keuntungan bagi pengunjung

Kode yang berada diantara dan   silahkan anda ganti dengan kode untuk isi popup anda.

/* style untuk link popup */
a. tautan munculan {
lapisan. 17px 0;
perataan teks. tengah;
margin. 10% otomatis;
posisi. relatif;
lebar. 300px;
warna. #fff;
dekorasi teks. tidak ada;
warna latar belakang. #FFBA00;
radius perbatasan. 3px;
bayangan kotak. 0 5px 0px 0px #eea900;
menampilkan. blok;
}
a. tautan popup. arahkan {
warna latar belakang. #ff9900;
bayangan kotak. 0 3px 0px 0px #eea900;
-webkit-transisi. semua 1;
transisi. semua 1;
}
/* akhiri tautan munculan*/
/* animasi popup */ @-webkit-keyframes autopopup {
dari {opacity. 0; margin atas. -200px;}
untuk {opacity. 1;}
}
@-moz-keyframes autopopup {
dari {opacity. 0; margin atas. -200px;}
untuk {opacity. 1;}
}
@keyframes autopopup {
dari {opacity. 0; margin atas. -200px;}
untuk {opacity. 1;}
}
/* akhiri animasi popup */
/*gaya untuk munculan */
#muncul {
warna latar belakang. rgba(0,0,0,0. 7);
posisi. tetap;
atas. 0;
kiri. 0;
Baik. 0;
bawah. 0;
margin. 0;
-webkit-animasi. popup otomatis 2s;
-moz-animasi. popup otomatis 2s;
animasi. popup otomatis 2s;
}
#muncul. target {
-webkit-transisi. semua 1;
-moz-transisi. semua 1;
transisi. semua 1;
kegelapan. 0;
visibilitas. tersembunyi;
}@media (min-lebar. 768px){
wadah popup {
lebar. 600px;
}
}
@media (maks-lebar. 767px){
wadah popup {
lebar. 100%;
}
}
wadah popup {
posisi. relatif;
margin. 7% otomatis;
lapisan. 30px kali 50px;
warna latar belakang. #fafafa;
warna. #333;
radius perbatasan. 3px;
}sebuah. munculan-tutup {
posisi. mutlak;
atas. 3px;
Baik. 3px;
warna latar belakang. #333;
lapisan. 7px kali 10px;
ukuran huruf. 20px;
dekorasi teks. tidak ada;
tinggi garis. 1;
warna. #fff;
}
/* akhiri gaya popup *//* gaya untuk konten popup */
formulir munculan {
margin. 10px otomatis;
}
bentuk popup h2 {
margin-bawah. 5px;
ukuran huruf. 37px;
transformasi teks. huruf besar;
}
popup-form. grup masukan {
margin. 10px otomatis;
}
popup-form. input-grup input {
lapisan. 17px;
perataan teks. tengah;
margin-bawah. 10px;
radius perbatasan. 3px;
ukuran huruf. 16px;
menampilkan. blok;
lebar. 100%;
}
popup-form. masukan-masukan kelompok. fokus {
garis-warna. #FB8833;
}
popup-form. masukan grup masukan[type=”email”] {
berbatasan. 0px;
posisi. relatif;
}
popup-form. masukan grup masukan[type=”kirim”] {
warna latar belakang. #FB8833;
warna. #fff;
berbatasan. 0;
kursor. petunjuk;
}
popup-form. masukan grup masukan[type=”kirim”]. fokus {
bayangan kotak. inset 0 3px 7px 3px #ea7722;
}
/* akhiri isian popup gaya */

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

Demo Auto PopupUnduh Seluruh Sumber

Pada auto popup saya menggunakan animasi css3 agar ada efek transisi. Sedangkan pada popup manual saya menggunakan transisi CSS3. Bagi anda yang tertarik mempelajari lebih lanjut tentang trik css ini, silahkan download file lengkapnya di bawah ini

Silahkan edit dan modifikasi sendiri. Anda juga dapat membuat karya lain dengan trik animasi CSS3 dan kelas semu. target

Menerapkan Di Blogger & WordPress

Sejujurnya, postingan kali ini lebih fokus pada web designer atau front-end web developer yang tertarik untuk mendalami lebih dalam tentang teknik CSS. Namun karena pengunjung blog ini juga banyak para blogger, maka saya berikan tutorial cara penerapannya di blog

Sebelum memasangnya di blog Anda, Anda harus menentukan terlebih dahulu apa tujuan dari popup tersebut. Akan diisi dengan popup apa itu. Anda bisa mengisinya dengan facebook like box, twitter follower box, dan sebagainya. Pertama dapatkan kode untuk konten popup. Setelah itu silahkan ikuti langkah-langkah dibawah ini

Apa itu modal dalam HTML?

Apa modal pada bootstrap?