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.
Daftar Isi Postingan
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.
– Kode yang ada diantara dan 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.
Demo Popup 1Demo Popup 2
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.
Kode yang berada diantara dan 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.
Demo Auto PopupDownload Seluruh Source
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 :
