Advertisement

Hot News

News

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
PopUp Modal di Blogger Reviewed by Oki Firmansyah on August 23, 2017 Rating: 5

11 comments:

  1. Wah.. mantab gan. Sangat bermanfaat!

    ReplyDelete
  2. Lengkap sekali, sekalian buat belajar soal css yang merupakan salah satu bagian paling susah saat buat web

    ReplyDelete
  3. ternyata mainan css, klo pake bootstrap gmn?

    ReplyDelete
    Replies
    1. sama aja gan, cuma beda tampilannya, klo bootstrap lebih ke era robotik mnurut saya, klo materalize tampilannya flat era modern mobile

      Delete
  4. Cukup mudah ya ternyata membuat popup modal menggunakan css frame. ane kira ribet min. terima kasih tutorialnya

    ReplyDelete
  5. Pop up modal cocoknya buat dijadikan pesan ke pengunjung untuk mematikan adblock xD

    ReplyDelete
    Replies
    1. klo saya gk perlu pesan kyak gt gan, mlah bikin gk nyaman pengunjung, hehehe

      Delete
  6. mantap nih bisa di PopUp gitu, jadi lebih terkonsentrasi pada PopUp

    ReplyDelete
  7. tutorial nyah mudah dimengerti, thanks bisa di pasang di blog saya sekarang.

    ReplyDelete
  8. bisa dicobain nih gan, thank ya infonya ,..

    ReplyDelete

All Rights Reserved by Digital Tutor © 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.