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
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.
<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>
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;
}
– 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-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>
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 */
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~
Cara Membuat Popup/Modal dengan CSS3 Murni (Tanpa JS) - BloggerIndo
[…] membuat popup hanya dengan menggunakan CSS3 murni, tanpa javascript maupun jquery sedikitpun … The post Cara Membuat Popup/Modal dengan CSS3 Murni […]
Gerhana
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…?
Syakir Rahman
Yaa tambahkan 2 kali kodenya, berurutan gapapa yang penting selector ID dan Class-nya dibedakan
Marry
yang tanpa edit html gak ada ya mas??
Syakir Rahman
ngga ada, kecuali kalo masukkin kodenya lewat widget.. mungkin bisa, tapi tidak dianjurkan
widodo
keren mas izin nyoba…
Syakir Rahman
Silahkan mas widodo 🙂
Hafizhul
thanks…
baru tau kalau css bisah buat popup se keren diatas
Syakir Rahman
Sama-sama mas.. yaap, itulah CSS3 😀
ope
keren nih, bookmark dulu 😀
Syakir Rahman
Sip.. Silahkan gan 😀
afris
kalo bisa tambahin lagi yang banyak tutorial css nya sebagai alternatif jquery , Thanks
Syakir Rahman
Siap gan.. datang aja sering-sering heheh
tutorial89
makasih mas mau langsung praktek nih. btw bisa gak langsung di copi di widget blogger…
Syakir Rahman
Bisa saja sebenernya, cuma rawan ada error nantinya..
saiful
tapi css gk bisa menghandle tombol ESC untuk mengclosenya
Syakir Rahman
Iya mas, maklum kan cuma ikon closeya cuma link, yang sifatnya sama kayak link lain
Iskael
keren …. sudah lama saya tidak otak atik CSS lagi
jadi pengen nyoba juga bikin kayak gitu
Syakir Rahman
Ayoo dong belajar lagii, biar makin banyak ilmunya 🙂
Edi
bagus ,,
makasih gan tutorial + download nya 😀
sangat bermanfaat
Syakir Rahman
Ya, sama-samaa 😀
Prisma Try Laksana
Oh iya mas, btw yang update artikel itu namanya dibuat apa ya ? Sticky tapi tapi di bawah, mohon pencerahannya dong 🙂
Syakir Rahman
Sticky widget warna oren di pojok kanan itu? besok saya bahas mas cara buatnya hehe.. insyaallah
Prisma Try Laksana
Oke saya tunggu ya 🙂
Achmad Muharya
Wah ini nih yang saya cari 😀
Makasih ya mas 🙂
Syakir Rahman
Yap, sama-samaa 😀
Rief
Mantap mas , saya baru tau cuma pake CSS ternyata bisa..
bwt bkin itu saya biasanya pke jQuery + bootstrap
Syakir Rahman
Yaap.. bisa mas.. dicoba saja silahkan 😀
WhaleTekno
Saya masih pemula dalam dunia CSS dan tertarik sekali untuk mempelajarinya. Kalau belajar CSS tanpa orang yang ahli, sulit atau tidak ya mas?
Syakir Rahman
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 😀
Bahril Ilmi
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..
Syakir Rahman
Yaa, integrasikan HTML-HTML-nya dengan parameter di CI
Bahril Ilmi
bisa minta tlong bikin tuts nya mas.. mengimplementasikan CSS tsb ke parameter CI.. terima kasih.
Syakir Rahman
Maaf mas, saya ga bahas tentang CI disini.. lagi pula kalo implementasi kan sama aja kaya elemen-elemen lain.. tinggal ganti HTML untuk konten yang dinamis aja..
sutopo
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.
Syakir Rahman
Itu harus pakai bahasa server side, kalau web biasanya PHP atau ASP.. Coba baca posting ini : Apa itu Client-Side dan Server-side scripting
Muhammad Maki
wah ternyata mudah ya,, hanya dengan memanfaatkan pseudo element,, nda kepikiran..
Syakir Rahman
Heheh.. iya mas, kebanyakan juga pada bilang gitu 😀
Muhammad Maki
loading blog jadi tambah ringan berkat css3
Kevin Adam
Gan cara agar Email Adress ama submitnya kaga ada gimana gan…?
Syakir Rahman
Hapus aja kode html yang < form method+… sampai
Kevin Adam
tapi kok gan pas ane klik tombolnya kok kaga muncul ya? malah beralih ke “https://www.blogger.com/blogger.g?blogID=4691175513475803910#popup” Mohon bantuannya mas….
Kevin Adam
udah bisa gan maaf ngerepotin, tutorialnya sangat bermanfaat gan thanks banget nih….
Kevin Adam
gan cara agar popup boxnya responsive gimana…?
Syakir Rahman
Itu kalo didemonya sudah responsive mas.. cek aja
Kevin Adam
di blog ane kaga gan 🙁
cara
di salah satu blog ane gk work gan,
malah merusak sidebar pasang css nya.
Syakir Rahman
Mungkin pas paste kodenya ada yang tertinggal, atau adanya class dengan nama yang sama sehingga menimbulkan bentrok CSS. Coba di cek lagi
Ade Brawijaya
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….
Syakir Rahman
Maksudnya test dengan responsive design itu gimana yah ? soalnya itu kan sudah responsive
sandri
gan, ko dpasang di web ane gambar yg ada diweb malah nutupin popupnya ya, apa yg salah ya???
Syakir Rahman
itu karena z-index gambarnya lebih besar.. Coba yang popup itu, di kode cssnya cari z-index:999.. tambahin 9999-nya sampai popup menutupi gambar
Yuki
gan, kalau kita hanya ingin popupnya muncul di homepage kita doang gmn ya?
Syakir Rahman
Kodenya jangan ditambahin di widget.. Tapi di Template > Edit HTML > taruh kode di bawah kode ini b:if cond=’data:blog.pageType == "index"’
Rido Agil
Mas biar pop up content nya gg memberi space pada tampilan html nya gimana ?
Syakir Rahman
Padding di kode css-nya dikurangi
putra
setelah saya pasang kok cuma tampil hanya di home saja ya? mohon pencerahanya tanks
Syakir Rahman
Nempatin kodenya dimana?
sukra
setelah sekian lama nyari-nyari di gugel, akhirnya ketemu juga ilmu yang saya butuhkan :D.
terima kasih mas syakir
Syakir Rahman
Iyaa, sama-sama
Newbie
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.. 🙂
Syakir Rahman
coba tambahkan di css di selector
#popup
‘height:0;
‘ dan di selector#popup:target
‘height:auto
‘Newbie
waaa.. cakep dech si mas Rahman.. its work mas.. makasih banyak..
Syakir Rahman
Iyap sama-sama.. panggil saya syakir saja mas heheh
Rifan
Kok yang ini gak work ya mas di tempat saya, btw saya pake PHP web dinamis, jadi fotternya dipisah.
Syakir Rahman
Coba jangan dibuat terpisah, mungkin itu penyebabnya
antoc
mas,, misal nya didalam pop up terdapat $id(yang dari while php). gimana cara set value textbox dengan $id.
Syakir Rahman
Kalau mau seperti itu yaa pakai javascript atau jquery.. Tapi, menurut saya pasti bisa langsung set dari php-nya juga
Rahman Auf
Mantab Mas
OM PEY
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
Syakir Rahman
Tinggal ganti aja tombol yang di kliknya dengan gambar.. kodenya kurang lebih seperti ini a href=”#popup” img src=”http://url-gambarn” /a
Achmad Alimin
Terima kasih mas untuk tutorialnya sangat membantu 😀
andrian
mas, gina klo mau menampilkan popup dengan form tertentu.
sy membuat form di jotform.com sy ingin form tersebut tampil menjadi popup.
makasi sebelumnya
Syakir Rahman
Bisa kok, kode form dari jotformnya tinggal letakkan diantara container popup
Eris
Makasih mas infonya ,kebetulan saya lagi cari ini
Jhangsoen.com
arif setiadi
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
Syakir Rahman
script like box fp kalau tidak salah membutuhkan 2 script yah, satu disimpan diawal tag body, satu lagi di tempat yang kita inginkan..
Ahyar
Makasih gan, tp ada sdikit masalah. Tombol X(close) nya ga berfungsi.
Apa ada jquery yg mesti d tambahkan d template nya?
Thanks
Syakir Rahman
CSSnya udah di copy semua belum ? kan kalau di demo berfungsi
budybeo
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
Syakir Rahman
Kalo dari file lain, harus ada kode tambahan yaitu menggunakan metode ajax
Kukuh
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?
Syakir Rahman
Untuk htmlnya di bawah akhir tag body aja, kalo css yaa di bawah css yang lainnya
OMP
Terimakasih ilmunya mas,
terus gimana ya kalo saya hanya mau menampilkan button popup nya hanya d page tertentu saja ?
Syakir Rahman
ikuti panduan di atas, tapi kodenya simpen di page yang dipilih.. di masukkan lewat edit html di posting juga bisa kok
Axell Gun
Mas… kalau ingin menambahkan cockie agar popup nya muncul sekali saja untuk setiap visitor gimana??
Syakir Rahman
Saya disini hanya membahas teknik cssnya saja.. untuk menambahkan cookie lain kali saya bahas
ahmad khakim
kok ndak bisa ya mas??
jadi, konten di popup yg harusnya muncul pas link nya diklik udah muncul dulu
Syakir Rahman
Masnya salah menggunakan nih kayanya.. Jangan gunakan yang auto popup
ramdan
Mas, mau tanya. Kalo sy mau nampilin data yg ada di databse ke dalem popupnya gimana ya? Makasih seblumnya
Syakir Rahman
Yaa tinggal di looping data di database tersebut di dalam markup html popup di atas
mirham
kalau memunculkan widgetnya cuman sekali saja itu gimana bang ?
Syakir Rahman
Untuk sementara ini belum bisa
Septian
keren mas cocok untuk pembuatan block sitelogin 😀 hehe , karena saya lagi proyek building CMS sendiri . makasih sangat membantu .
DAMBLUE
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
Syakir Rahman
Kalo untuk postingan ngga recommended gan.. nanti scriptnya bakal numpuk dan khawatir terjadi error
fakhrie
mastah2 ..
mau tanya, kalo mau bikin notifikasi jika ada data baru masuk ke database,
mohon pencerahannya mastah2 ..
thx before
Syakir Rahman
Gunakan metode ajax, silahkan ubek-ubek disini : http://www.w3schools.com/ajax
Sandi Mulyadi
Kalau disisipin area untuk memasukkan kode iklan kira-kira ditambahin apa ya, Kang? Seperti yang terlihat di situs CNET ketika kita download software tertentu
Amry Martin
Postingan ini sangat berguna untuk saya, terima kasih Gan.
Jika Anda membutuhkan Driver Printer, silahkan kunjungi website http://www.agendriver.com
yanti
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
Syakir Rahman
Bisa, tapi harus menggunakan kode php
Mukhotob Hamzah
Sudah saya coba dan berhasil gan.. hasilnya saya taruh di salah satu web client saya.. http://herbalcepatlangsing.com
Makasih yakk.. Varokah dah ini blog.!
Andy Fuad
Izin Coba ya Mas…
fitra
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
Syakir Rahman
Iyap.. sama bro.. silahkan dicoba aja..
My Kuper
Bang, kalo misal diganti dengan fanspage facebook, yang dirubah apanya bang ? thanks
Syakir Rahman
Di kode htmlnya ada
, btw disitu juga ada keterangannya
Kerjakosong
Terima kasih atas tutorialnya..sangat bermanfaat buat pemula.. 🙂
Didiek
popupnya keren juga, izin copy ya. makasih udah share sesuatu yang berguna
annisar
kereen sekali ijin coba ya mas 🙂
Marcelino
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
Syakir Rahman
Gagal gimana yaah ?
waah kalo terlalu spesifik gitu maaf ga bisa bantu
Gratisarea
mas, ini untuk blogspot bisa gak yah? mau nyoba soalnya.. terimakasih
Cara Membuat Popup/Modal dengan CSS3 Murni (Tanpa Javascript/Jquery) | Andi Aditya
[…] HTML […]
Kanknkunk
Gan kok kode CSS nya ga bsa di ambil, cuman ada kode html nya aja
Febri Krisnanto Wiyono
bro, source code cssnya engga bisa dibuka mohon ditindak ya 🙂
syakirurahman
Thanks bro sudah melaporkan
Acep Lutvi
Ijin Download Gan… terimakasih…!!!
azle
mas selector ID itu yg mana ?? apakah bisa di bikin banyak ?
syakirurahman
yang diawalnya ada tanda #, selector id tidak bisa dibuat banyak.. harus satu di setiap html
Liga Terkini
Terimakasih gan, info ini sedikit membantu saya yang buta akan BANNER POP UP
Joker123
Nice Article !