Membuat Popup Keren dengan CSS3 Murni, Tanpa JS sama sekali!

Kawan-kawan disini, yang kebanyakan blogger pasti sudah tidak asing dengan popup. Saya juga yakin, beberapa dari sobat pasti memakainya di blognya masing-masing. Popup emang efektif untuk mendorong pengunjung untuk melakukan sesuatu yang kita inginkan, seperti like Fans page facebook, follow twitter ataupun berlangganan.

Pembuatan popup ini biasanya menggunakan javascript atau jquery. Apalagi yang pakai timer. Penggunaan javascript sama jquery ini biasanya berefek pada kecepatan loading blog kita, bikin lola. Oleh karena itu, saya disini akan memberikan solusi dengan membuat popup dengan menggunakan teknik CSS3 murni, sehingga lebih ringan, interaktif dan tentu saja lebih mudah..

Kalau penasaran dengan penampakannya, silahkan lihat demo-nya disini.

Bagaimana? kalau tertarik yuk lanjutkan ke cara pembuatannya.

Ini kode HTML-nya :

<div class=”popup-wrapper” id=”popup”>
<div class=”popup-container”>
<!– Konten popup, silahkan ganti sesuai kebutuhan –>
<form action=”http://www.syakirurohman.net/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.syakirurohman.net/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>

dan ini CSS-nya :

/* 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 */

Untuk menerapkannya pada blog blogspot, silahkan ikuti langkah-langkah di bawah ini :
1. Login ke blogger dashboard > Pilih Blog > Template > Edit HTML
2. Pastekan kode CSS tepat di atas kode ]]></b:skin>.
3. Sebelum memasukan HTML-nya, ganti kode yang ada di antara <!– Konten popup, silahkan ganti sesuai kebutuhan –> dan <!– Konten popup sampai disini–> dengan kode isi untuk popup sobat. Popup sobat bisa diisi dengan Facebook like box atau Twitter follower box misalnya.
4. Setelah kode isi popupnya diganti dengan kode widget milik sobat, tempatkan semua kode htmlnya di bawah tag <body>
5. Lalu, save dan selesai .
* Catatan : sebelum paste kode CSS dan HTML-nya di blog, sebaiknya di paste dulu di notepad, untuk menghilangkan formating teksnya.

Bagi sobat yang juga sering otak-atik kode HTML & CSS, atau siapapun yang mau belajar tentang teknik CSS ini, semua file demonya bisa sobat download disini.

Untuk versi yang lebih lengkap, silahkan sobat lihat di sumber. Kalau di tulis disini semuanya kebanyakan. Semoga bermanfaat

Sumbernya disini

 

keren , cocok banget di pasang Like facebook . tapi itu reponsif gak ya ?

 

Responsive kok sob.. Lihat aja ada kode ini :

@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}

Kalo gak percaya, resize di demo-nya hehe

 

wow keren, tapi kurang cocok di blog saya

 

kalu tanpa js mana bisa muncul gan...

 

wah manteb nih popupnya , beda dari yang lain . coba dulu gan

 

kalo dicoba mestinya jadi enteng kan ya bang?

 

Itu ane muncul kok gan, coba lihat di demonya.. terus periksa tuh pakai inpect element atau CTRL+U, sama sekali gak ada file atau script JS

 

Sip, silahkan gan

Bikin enteng sih nggak, cuma ga bakal bikin berat aja

 

Waduh, pusing kalau lihat yang seperti itu.

 

Biasakan diri dengan coding gan hehehe

 

Asikkk... lanjut gan

 

Mantap gan buat nambah subscriber... ini merupakan tool wajib... sayangnya kebanyakan tambah bikin blog lelet.. jika hanya menggunakan css3 pasti lebih cepat loadingnya... di paratekkin dulu... thanks..

 

Sipp.. Silahkan gan