Tuesday, July 25, 2017

Cara Membuat PopUps Website Keren

Cara Membuat PopUps Website Keren



Hai Selamat pagi sobat,
Kali ini saya akan Share tentang PopUps yang keren untuk website kalian,
Bagi yang sering menggunakan notif, ini sangatlah cocok untuk kalian

Dan tampilannya seperti diatas atau dibawah ini :




Bagaimana ?
Keren pasti hehe..

Bahan :   KLIK DISINI

  • Aler.Css
  • Alert.Js


Setelah download, kedua script diatas jadikan satu folder di website
Kemudian Edit file website kalian index/apapun itu yang ingin kalian beri PopUps seperti diatas dengan cara :


<!-- bagian popup -->
 <div class="popup">
 <div id="box">
 
        <!-- This is what you need -->
           <script src="Folder_Tempat_Script_Kalian/Alert.js"></script>
           <link rel="stylesheet" href="Folder_Tempat_Script_Kalian/Alert.css">
        <!--.......................-->
 
 <ul class="JCFT">

 

 <li class="success">
  <div class="ui">
   <p>A success message!</p>
   <button>Click Here</button>
  </div>
  
 </li>

 

</ul>

<script>

document.querySelector('ul.JCFT li.success button').onclick = function(){
 swal("THANKS YOU!", "Thanks to Visit!", "success");
};

</script>

 </div> 
 </div>
<!-- akhir dari popup -->
Keterangan :
Hijau = Untuk menandai tempat script kalian agar mudah saat dicari.
Highlight = Tempat dimana kalian meletakan Alert.Css dan Alert.Js yang sebelumnya diatas sudah kalian download.
Kuning = Kalian Bisa edit sesuai selera kalain.

Bagaimana ?
Mudah bukan..


Baca Juga : Cara Redirect Dan Auto Refresh Website


Mungkin cukup sekian.
Semoga Artikel saya ini dapat bermanfaat bagi kalian yang mencari Cara Membuat PopUps Keren
Apabila ada kekurangannya mohon dimaklumi.
Sekian Terimakasih.
Load disqus comments

1 komentar: