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

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=”http://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=”http://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=”http://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=”http://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

119 Comments

  1. keren mas izin nyoba…

  2. thanks…
    baru tau kalau css bisah buat popup se keren diatas

  3. keren nih, bookmark dulu 😀

  4. kalo bisa tambahin lagi yang banyak tutorial css nya sebagai alternatif jquery , Thanks

  5. makasih mas mau langsung praktek nih. btw bisa gak langsung di copi di widget blogger…

  6. tapi css gk bisa menghandle tombol ESC untuk mengclosenya

  7. keren …. sudah lama saya tidak otak atik CSS lagi
    jadi pengen nyoba juga bikin kayak gitu

  8. bagus ,,
    makasih gan tutorial + download nya 😀
    sangat bermanfaat

  9. Oh iya mas, btw yang update artikel itu namanya dibuat apa ya ? Sticky tapi tapi di bawah, mohon pencerahannya dong 🙂

  10. Wah ini nih yang saya cari 😀

    Makasih ya mas 🙂

  11. Mantap mas , saya baru tau cuma pake CSS ternyata bisa..
    bwt bkin itu saya biasanya pke jQuery + bootstrap

  12. Saya masih pemula dalam dunia CSS dan tertarik sekali untuk mempelajarinya. Kalau belajar CSS tanpa orang yang ahli, sulit atau tidak ya mas?

    • Sebenernya, yang namanya coding itu gampang-gampang susah.. tapi tanpa ada seorang ahli yang bimbing pun kita bisa menguasai, walaupun lebih lama.

      Sering-sering datang ke sini aja mas tiap hari senin hehe. Soalnya akan ada posting tentang CSS / trik desain web yang menunggu 😀

  13. sangat membantu mas artikelnya.. kalo untuk diterapkan pada framework codeignter gmn ya mas caranya.. udah saya coba dengan css style nya blum bisa mas.. mohon bimbingannya mas.. trima kasih..

  14. makasih mas buat tutornya, tapi saya mau tanya mas, kalau semisal kita ingin masukin hasil imputan kita ke database gimana ya, disitu kan dijelasin kalau tidak salah, imput username dan password, nah dari imputan itu kita mau masukin ke database yang kita buat, caranya gimana ya mas?
    mohon pencerahannya.

  15. wah ternyata mudah ya,, hanya dengan memanfaatkan pseudo element,, nda kepikiran..

  16. Gan cara agar Email Adress ama submitnya kaga ada gimana gan…?

  17. gan cara agar popup boxnya responsive gimana…?

  18. di salah satu blog ane gk work gan,
    malah merusak sidebar pasang css nya.

  19. saya coba dihtml biasa mas… tapi setelah test dengan responsive design kenapa ya ga bisa di close yg contoh 1 & 2, yang contoh 3 auto popup malah pas autopop langsung close
    mohon pencedrahannya mas….

  20. gan, ko dpasang di web ane gambar yg ada diweb malah nutupin popupnya ya, apa yg salah ya???

  21. gan, kalau kita hanya ingin popupnya muncul di homepage kita doang gmn ya?

  22. Mas biar pop up content nya gg memberi space pada tampilan html nya gimana ?

  23. setelah saya pasang kok cuma tampil hanya di home saja ya? mohon pencerahanya tanks

  24. setelah sekian lama nyari-nyari di gugel, akhirnya ketemu juga ilmu yang saya butuhkan :D.
    terima kasih mas syakir

  25. bagus popupnya mas namun menyisakan masalah tampilan di halaman depan blog saya..
    masalahnya:
    jika popup dalam kondisi tidak aktif atau tidak dimunculkan maka akan menyisakan space atau ruang kosong yang melebar
    lihat SS: http://prntscr.com/7nahvj
    namun jika popup dalam kondisi aktif atau muncul maka space akan kembali kebentuk semula alias normal
    lihat SS: http://prntscr.com/7najhq

    pemasangan HTML popup memang tidak didalam widget tapi di atas footer, hal ini dikarenakan penggunaan tag-kondisional pada widget yang tidak dimunculkan dihalaman depan blog

    mohon pencerahannya.. 🙂

  26. mas,, misal nya didalam pop up terdapat $id(yang dari while php). gimana cara set value textbox dengan $id.

  27. Mantab Mas

  28. maaf mas mw nanya klo itu kan yg di klik kluar popunya tulisan,,
    klo yg di klik gambar trus kluar popup itu sama htmlnya?
    mohon bimbingannya mas,, newbie soal web
    masih banyak yg mw ditanya tanya bisa minta CP nya mas ? no hp sy 089643432334

  29. Terima kasih mas untuk tutorialnya sangat membantu 😀

  30. mas, gina klo mau menampilkan popup dengan form tertentu.
    sy membuat form di jotform.com sy ingin form tersebut tampil menjadi popup.
    makasi sebelumnya

  31. Makasih mas infonya ,kebetulan saya lagi cari ini
    Jhangsoen.com

  32. mas,kalo di dalam pop upnya itu dikasih like box fanspage facebook gimana yah ? pas saya tambahkan scriptnya(dari dev facebook) di dalam ….. kok malahan gak muncul yah?mohon pencerahannya,masih newbie nih,hehe

  33. Makasih gan, tp ada sdikit masalah. Tombol X(close) nya ga berfungsi.
    Apa ada jquery yg mesti d tambahkan d template nya?
    Thanks

  34. sudah berhasil mas popup nya saya buat bisa di scroll..

    kira kira mas ada ide ga mas agar bisa di buat banyak link popup nya untuk masing masing gambar masing masing link seperti link popup nya dipanggil dari file lain??

    soalnya klo saya buat seperi peletakan script biasa hasilnya jadi menumpuk atau kegabung script nya

    jadi seperti ini http://jendelatours.com/visa/

    terimakasih

  35. Wikwiww..!! Terimakasih sbelumnya.. akhirnya dpt jg nih tutorial modal css3 yg gak pake js.. btw kalo utk ditaruh di page blogspot, letaknya dmn ya, mas?

  36. Terimakasih ilmunya mas,
    terus gimana ya kalo saya hanya mau menampilkan button popup nya hanya d page tertentu saja ?

  37. Mas… kalau ingin menambahkan cockie agar popup nya muncul sekali saja untuk setiap visitor gimana??

  38. kok ndak bisa ya mas??
    jadi, konten di popup yg harusnya muncul pas link nya diklik udah muncul dulu

  39. Mas, mau tanya. Kalo sy mau nampilin data yg ada di databse ke dalem popupnya gimana ya? Makasih seblumnya

  40. kalau memunculkan widgetnya cuman sekali saja itu gimana bang ?

  41. keren mas cocok untuk pembuatan block sitelogin 😀 hehe , karena saya lagi proyek building CMS sendiri . makasih sangat membantu .

  42. gan klo untuk buat di setiap postingan gimana ya untuk WP.
    jadi setiap postingan manual gitu mau nambahin popupnya. ane mau isi di popupnya video.
    mohon pencerahannya thanks

  43. mastah2 ..
    mau tanya, kalo mau bikin notifikasi jika ada data baru masuk ke database,
    mohon pencerahannya mastah2 ..

    thx before

  44. Kalau disisipin area untuk memasukkan kode iklan kira-kira ditambahin apa ya, Kang? Seperti yang terlihat di situs CNET ketika kita download software tertentu

  45. Postingan ini sangat berguna untuk saya, terima kasih Gan.
    Jika Anda membutuhkan Driver Printer, silahkan kunjungi website http://www.agendriver.com

  46. mas klo aq bwt nampilin form input data,utk disimpan ke mysql bisa ga ya?oya,yg sintak ga dipake hidden2 dbawah mana aja ya biar ga boros

  47. Sudah saya coba dan berhasil gan.. hasilnya saya taruh di salah satu web client saya.. http://herbalcepatlangsing.com

    Makasih yakk.. Varokah dah ini blog.!

  48. Izin Coba ya Mas…

  49. mas saya mau nanya
    misalkan saya mempunyai tombol pesan
    ketika pengunjung mengklik tombol pesan tersebut lalu muncul pop upnya
    apakah sama caranya dengan yang di atas…
    thanks

  50. Bang, kalo misal diganti dengan fanspage facebook, yang dirubah apanya bang ? thanks

  51. Terima kasih atas tutorialnya..sangat bermanfaat buat pemula.. 🙂

  52. popupnya keren juga, izin copy ya. makasih udah share sesuatu yang berguna

  53. kereen sekali ijin coba ya mas 🙂

  54. gagal bro… bisa tolong bantu ngga?? ane mau naru manual pop up nya itu di menu atas yang ada shopping cartnya.. jadi pas di klik angka itu muncul pop up yang isinya checkout.. tolong pencerahaannya mastah.thanks

  55. mas, ini untuk blogspot bisa gak yah? mau nyoba soalnya.. terimakasih

  56. Gan kok kode CSS nya ga bsa di ambil, cuman ada kode html nya aja

  57. Febri Krisnanto Wiyono

    bro, source code cssnya engga bisa dibuka mohon ditindak ya 🙂

  58. Ijin Download Gan… terimakasih…!!!

  59. Anu mas ndak bisa bikin dua popup di satu halaman posting, rencanae mau bikin share facebook popup sama download popup, tapi ndak bisa. terpaksa tak ganti go popup windows yang satunya… pie carane mas biar bisa dua…?

  60. yang tanpa edit html gak ada ya mas??

  61. Yaa tambahkan 2 kali kodenya, berurutan gapapa yang penting selector ID dan Class-nya dibedakan

  62. ngga ada, kecuali kalo masukkin kodenya lewat widget.. mungkin bisa, tapi tidak dianjurkan

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *