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