Cara Menciptakan Popup Hanya Dengan Css3 (Tanpa Javascript/Jquery)

By Fira - July 03, 2015

Cara Membuat Popup Hanya Dengan CSS3 (Tanpa Javascript/Jquery) - Kebanyakan pop up menggunakan javascript yang akan menciptakan loading blog semakin lambat. Misalkan pop up like box, biasanya memakai javascript. Pada tutorial kali ini kita akan menciptakan pop up dengan hanya memakai 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 arahan ]]></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 arahan <body> hingga tag epilog </body>. Anda sanggup juga meletakkannya memakai 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 hingga disini--> <a class='popup-close' href='#closed'>X</a> </div> </div>

3. save & done

Preview

Pop up ini akan muncul saat tombol pop up di klik, sehingga sanggup Anda kreasikan sendiri. Namun, aku yakin banyak teman blogger yang lebih suka pop up versi auto. Pop up versi auto yaitu pop up box yang akan muncul saat loading blog akibat di muat. Oleh alasannya yaitu itu, aku juga akan menawarkan tutorial cara menciptakan Auto pop up hanya dengan memakai 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 ibarat 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 hingga disini--> <a class="popup-close" href="#popup">X</a> </div> </div>

Preview

Saya rasa sekian artikel perihal Cara Membuat Popup Hanya Dengan CSS3 (Tanpa Javascript/Jquery) ini. Semoga sanggup bermanfaat bagi Anda dan sebelum menerapkan cara di atas, ada baiknya kalau Anda meninggalkan komentar terlebih dahulu sehingga aku semakin ulet 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 .

Search This Blog

Roda Motiv