Cara Membuat Popup Hanya Dengan CSS3 (Tanpa Javascript/Jquery)

Cara Membuat Popup Hanya Dengan CSS3 (Tanpa Javascript/Jquery) - Kebanyakan pop up menggunakan javascript yang akan membuat loading blog semakin lambat. Misalkan pop up like box, biasanya menggunakan javascript. Pada tutorial kali ini kita akan membuat pop up dengan hanya menggunakan CSS dan HTML saja, tentunya tanpa javascript.

Baca juga : Cara Membuat Like Box Twitter di Blog

Cara Membuat Pop up Button Hanya Dengan CSS

1. Silahkan copy CSS berikut dan letakkan sebelum kode ]]></b:skin> atau </style>.

/* CSS Pop Up Button*/
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 0 0 #eea900;display:block}
a.popup-link:hover{background-color:#ff9900;box-shadow:0 3px 0 0 #eea900;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}
#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:999;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}
@media (min-width:768px){.popup-container{width:300px}}
@media (max-width:767px){.popup-container{width:90%}}
.popup-container{position:relative;margin:7% auto;padding:15px 30px;background-color:#8dbb90;color:#fff;border-radius:3px;line-height:normal;font-size:130%;width:30%;border:5px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.15);}
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;border-bottom-left-radius:3px;}
a.popup-close:hover{border-radius:3px;transform:scale(1.5)}

2. Silahkan letakkan HTML nya di antara kode <body> sampai tag penutup </body>. Anda bisa juga meletakkannya menggunakan add widget > HTML/Javascript.

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

Masukkan Kontent apa saja disini. Bisa tulisan, widget fanspage, subscribe box dll

<!-- Konten popup sampai disini-->
<a class='popup-close' href='#closed'>X</a>
</div>
</div>

3. save & done

Preview

Pop up ini akan muncul ketika tombol pop up di klik, sehingga dapat Anda kreasikan sendiri. Namun, saya yakin banyak sobat blogger yang lebih suka pop up versi auto. Pop up versi auto adalah pop up box yang akan muncul ketika loading blog selesai di muat. Oleh karena itu, saya juga akan memberikan tutorial cara membuat Auto pop up hanya dengan menggunakan CSS dan HTML saja.

Baca juga : Cara Memasang Fans Page Like Box Dengan Efek Bounce

Cara Membuat Auto Pop up Hanya Dengan CSS

Step atau tahapan nya kurang lebih sama seperti cara pemasangan pop up button, yang membedakan hanya CSS dan HTML saja. Berikut CSS dan HTML auto pop up.

/* CSS Auto Pop Up*/
a.popup-link{padding:17px 0;text-align:center;margin:10% auto;position:relative;color:#fff;text-decoration:none;background-color:#FFBA00;border-radius:3px;box-shadow:0 5px 0 0 #eea900;display:block}
a.popup-link:hover{background-color:#ff9900;box-shadow:0 3px 0 0 #eea900;-webkit-transition:all 1s;transition:all 1s}
@-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}}
#popup{background-color:rgba(0,0,0,0.7);position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:99999;-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:300px}}
@media (max-width:767px){.popup-container{width:90%}}
.popup-container{position:relative;margin:7% auto;padding:0;background-color:#8dbb90;color:#fff;border-radius:3px;line-height:normal;font-size:130%;width:340px;border:5px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.15)}
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;border-bottom-left-radius:3px}
a.popup-close:hover{border-radius:3px;transform:scale(1.5)}

<div class="popup-wrapper" id="popup">
<div class="popup-container">
<!-- Konten popup, silahkan ganti sesuai kebutuhan -->

Masukkan Kontent apa saja disini. Bisa tulisan, widget fanspage, subscribe box dll

<!-- Konten popup sampai disini-->
<a class="popup-close" href="#popup">X</a>
</div>
</div>

Preview

Saya rasa sekian artikel tentang Cara Membuat Popup Hanya Dengan CSS3 (Tanpa Javascript/Jquery) ini. Semoga bisa bermanfaat bagi Anda dan sebelum menerapkan cara di atas, ada baiknya bila Anda meninggalkan komentar terlebih dahulu sehingga saya semakin giat sharing ilmunya. Bila ada pertanyaan silahkan tuliskan pada kolom komentar di bawah atau di halaman OOT (Out Of Topics). Terima Kasih Banyak Telah Membaca Artikel di Opick Weblog.

Bila ingin copas silahkan lapor & cantumkan link berikut.
Source : https://wajahilmu.blogspot.com/2015/07/cara-membuat-pop-up-tanpa-javascrip.html

Share this :