23 August 2017

PopUp Modal di Blogger

Banyak sekali Website Framework, Materialize adalah salah satunya
Tutorial PopUp-Modal kali ini saya menggunakan CSS Framework dari Materialize yaitu bagaimana Cara membuat PopUp-Modal dari CSS Frame Materialize ke Tema Blogger tanpa merusak tema bawaan Blogger.

Oke langsung saja.!
Click tombol di bawah ini untuk melihat hasil Tutorial



1. Langkah Pertama

Tab Layout/TataLetak - Tambahkan Widget

masukkan kode singkat ini dalam widget tadi

 <a class="waves-effect waves-light btn black" style="color:white" href="#modal1">Tombol PopUp-Modal</a>


  • warna ungu = kode warna background tombol
  • warna biru = kode warna Tulisan Tombol
  • warna merah = silahkan ganti sesuai selera
Simpan


2. Langkah Kedua

masuk ke Tab Theme/Tema - Costumize/Sesuaikan 


Advanced/Lanjutan - Add CSS/Tambahkan CSS

masukkan kode di bawah ini ke dalam kolom Add CSS tadi


itu adalah kode CSS PopUp-Modal, sebaiknya jangan di rubah

Apply/Terapkan

3. Langkah Ketiga

Tab Theme/Tema - Edit HTML
cari kode </body> gunakan CTRL+F untuk mempermudah pencarian
masukkan kode berikut tepat di atas kode tadi

<script src='https://cdn.rawgit.com/OkiFIrman/javascript/53b48e7b/jquery-1.11.3.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/OkiFIrman/javascript/53b48e7b/materialize.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/OkiFIrman/javascript/af184afa/init_modal.js' type='text/javascript'/>

ini adalah kode untuk memanggil file JavaScript dan Plugin Modal Materialize

4. Langkah Keempat

langkah terakhir. masih di halaman Edit HTML cari kode <body>

masukkan kode berikut tepat di bawah nya

<!-- Modal Structure -->
  <div class='modal' id='modal1'>
    <div class='modal-content'>
      <h4>Judul Modal</h4>
      <p>Paragraf Modal</p>
    </div>
    <div class='modal-footer'>
      <a class='modal-action modal-close waves-effect waves-green btn-flat' href='#!'>Tombol Modal</a>
    </div>
  </div>

Simpan

Selesai, Selamat Mencoba... Tinggalkan komentar di bawah jika ada kesulitan
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post