Tutorial Bootstrap 5 platform Blogger - Bagian #1 Modal

Bootstrap 5 platform Blogger - Bagian #1 Modal

Bootstrap 5 platform Blogger - Bagian #1 Modal

Bootstrap 5

Sekilas Bootstrap 5 adalah versi terbaru framework front-end populer dari Bootstrap, yang merupakan framework HTML, CSS, dan JavaScript paling populer untuk membuat situs web yang responsif dan mengutamakan seluler. Bootstrap dikembangkan oleh Twitter dan dirancang untuk memudahkan pembuatan tampilan web yang responsif dan menarik secara visual. Ini adalah alat yang sangat populer di kalangan pengembang web karena menyediakan sekumpulan komponen, gaya, dan utilitas yang dapat digunakan untuk membangun situs web yang menarik dengan cepat.

Fitur Bootstrap 5

Di bawah ini ini hanya beberapa fitur perubahan dan peningkatan yang ada dalam Bootstrap 5. Framework ini tetap menjadi alat yang sangat populer untuk pengembangan web responsif dan dapat membantu pengembang dalam membangun situs web yang menarik dan mudah dikembangkan.

Beberapa fitur dan perubahan penting dalam Bootstrap 5 meliputi:

• Tanpa ketergantungan jQuery.
  Bootstrap 5 memutuskan ketergantungannya pada jQuery dan beralih sepenuhnya ke JavaScript asli. Ini mengurangi ukuran file dan meningkatkan performa aplikasi.
• Penambahan utilitas baru.
  Bootstrap 5 menyertakan sejumlah utilitas baru, seperti utilitas ruang (spacing utility) untuk mengatur jarak antar elemen, utilitas pembungkus (wrapper utility) untuk mengelola tata letak, dan utilitas penyesuaian (customization utility) untuk menyesuaikan tema Bootstrap.
• Penghapusan komponen tertentu.
  Beberapa komponen yang tidak lagi digunakan atau dianggap tidak perlu telah dihapus dari Bootstrap 5, termasuk komponen jumbotron dan card-deck.
• Peningkatan tata letak grid.
  Bootstrap 5 menyertakan pembaruan pada sistem grid-nya, yang sekarang menggunakan sistem grid CSS Flexbox. Ini memberikan lebih banyak fleksibilitas dalam mengatur tata letak dan menyederhanakan penggunaan grid.
• Mode RTL (right-to-left).
  Bootstrap 5 mendukung mode right-to-left, yang memungkinkan pengembang untuk membuat tampilan yang sesuai dengan bahasa yang ditulis dari kanan ke kiri, seperti bahasa Arab atau Ibrani.
• Penyesuaian tema yang lebih mudah.
  Bootstrap 5 memperkenalkan utilitas penyesuaian (customization utility) yang memudahkan penggunaan tema khusus. Pengembang dapat dengan mudah menyesuaikan warna, ukuran, dan gaya komponen Bootstrap sesuai dengan kebutuhan proyek mereka.

Keuntungan Bootstrap 5

• Easy to use.
  Siapa saja yang hanya memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap
• Responsive features.
  CSS responsif Bootstrap menyesuaikan dengan ponsel, tablet, dan desktop
• Mobile-first approach.
  Di Bootstrap, gaya yang mengutamakan seluler adalah bagian dari kerangka inti
• Browser compatibility.
  Bootstrap 5 kompatibel dengan semua browser modern (Chrome, Firefox, Edge, Safari, dan Opera).

---

Tutorial Bootstrap 5

Ada dua cara untuk mulai menggunakan Bootstrap 5 di situs web Anda sendiri.

• Sertakan Bootstrap 5 dari CDN
• Unduh Bootstrap 5 dari getbootstrap.com

Bootstrap 5 - CDN jsDelivr

Jika Anda tidak ingin mengunduh dan menghosting Bootstrap 5 sendiri, Anda dapat memasukkannya dari CDN (Content Delivery Network), yaitu dari jsDelivr yang menyediakan dukungan CDN untuk CSS dan JavaScript Bootstrap.

jsDelivr adalah sebuah layanan CDN (Content Delivery Network) yang fokus pada penyediaan hosting dan pengiriman berbagai jenis file JavaScript (JS), CSS (Cascading Style Sheets), font, ikon, dan berkas-berkas statis lainnya. Singkatnya, jsDelivr membantu dalam mendistribusikan file-file tersebut secara efisien kepada pengguna di seluruh dunia.

Banyak pengguna sudah mengunduh Bootstrap 5 dari jsDelivr saat mengunjungi situs lain. Akibatnya, itu akan dimuat dari cache saat mereka mengunjungi situs Anda, yang menyebabkan waktu pemuatan lebih cepat. Juga, sebagian besar CDN akan memastikan bahwa setelah pengguna meminta file darinya, itu akan dilayani dari server yang terdekat dengan mereka, yang juga menyebabkan waktu pemuatan lebih cepat.

JavaScript?.. Bootstrap 5 menggunakan JavaScript untuk berbagai komponen (seperti modals, tooltips, popovers, dll). Namun, jika Anda hanya menggunakan bagian CSS dari Bootstrap, Anda tidak membutuhkannya.

Bootstrap 5 - Blogger

Untuk menggunakan CSS dan JavaScript Bootstrap di platform Blogger, Anda dapat mengikuti langkah-langkah berikut ini.
Tambahkan file CSS dan JS Bootstrap ke Blogger:

• Masuk ke akun Blogger Anda dan pilih blog yang ingin Anda ubah.
• Buka "Tata Letak" dan pilih "Edit HTML".
• Cari tag <head> dalam kode HTML dan tambahkan baris berikut sebelum tag </head> :

<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' rel='stylesheet'/>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js'/>

• Kemudia - Simpan

---

Bootstrap 5 - Modal

Modal Bootstrap adalah komponen yang disediakan oleh kerangka kerja Bootstrap untuk membuat jendela pop-up (modal) interaktif di situs web blogger Anda. Modal Bootstrap digunakan untuk menampilkan konten tambahan di atas latar belakang yang diredupkan, seringkali digunakan untuk menampilkan pesan, changelog, iklan ads, formulir, gambar, video, atau konten lain yang membutuhkan fokus pengguna.
Berikut ini adalah langkah-langkah umum untuk menggunakan Modal Bootstrap di situs web blogger Anda:

• Tambahkan HTML markup: Tambahkan elemen HTML yang akan digunakan sebagai pemicu untuk membuka modal. Ini bisa berupa tombol, tautan, atau elemen lain yang sesuai dengan kebutuhan Anda. Berikan atribut data-bs-toggle="modal" dan data-bs-target="#nama-modal" untuk menentukan bahwa elemen tersebut akan membuka modal.

<button type="button" data-toggle="modal" data-target="#myModal">Buka Modal</button>

• Definisikan struktur modal: Di bagian HTML Anda, tambahkan elemen <div> dengan ID yang sesuai dengan data-target yang Anda tentukan sebelumnya. Anda juga dapat menambahkan kelas-kelas tambahan untuk mengkustomisasi tampilan modal.

<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Konten modal -->
    </div>
  </div>
</div>

• Tambahkan konten modal: Di dalam elemen modal-content , Anda dapat menambahkan elemen-elemen yang diperlukan, seperti judul modal, isi modal, tombol-tombol, dll. Sesuaikan dengan kebutuhan Anda.

<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Judul Modal</h5>
    <button type="button" class="close" data-bs-dismiss="modal"></button>
  </div>
  <div class="modal-body">
    <p>Isi modal disini...</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Tutup</button>
  </div>
</div>

Dalam contoh di atas, terdapat judul modal, tombol close (untuk menutup modal), isi modal, dan tombol-tombol pada bagian footer modal.
• Aktifkan modal: Dengan menggunakan atribut data-bs-toggle="modal" dan data-bs-target="#nama-modal", modal akan terbuka ketika elemen pemicu diklik.
• Atur gaya dan interaksi tambahan: Anda dapat menyesuaikan tampilan dan perilaku modal dengan menggunakan kelas-kelas tambahan yang disediakan oleh Bootstrap, serta menggunakan JavaScript untuk mengontrol modal.

Demo Basic Modal

Copy paste kode script basic modal di bawah ini , letakkan di halaman postingan blogger dengan mode teks Editor HTML atau di widget HTML homepage blogger.

  
<div class="container mt-3">  
  <h4>Contoh Modal</h4>  
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Buka Modal
</button>
</div>  

<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Contoh Modal Ads</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinOcC84WDsQFZ3QPRrX_GPCMSE2e8yKAJjTU8YdI3Cq9MGqBHmMzh06KyzNJJ4tqUB6KfuZKbNwyQ8YUDD1pvyxbMCnmGIZMAIAhx42zqlwrapMtTiOPNeMADR4sOC23ELpHxWKaxf_NNjtB34GqqswoypYOPWMIaj_zpwyhQ7pBJWGyo3KXsiNkfIv-4/s1080/raffa%20parabola%20%282%29.png.webp" alt="" />Kami, <b>Raffa Parabola</b> Melayani Pemasangan Antena TV Digital &amp; Parabola. Dan Jual Antena Digital UHF, Parabola, Receiver, Set Top Box, LNB dan Parts lainnya..<br/><br/>Salam,<br/><strong>Raffa Parabola</strong><br/><strong>Hp/Wa. 0811-222-1721</strong></p>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Tutup</button>
      </div>

    </div>
  </div>
</div>

Keterangan :
- Penambahan kata "fade" adalah untuk animasi modal.
- Penambahan kata "modal-lg" untuk merubah ukuran kotak dialog, bisa di coba ganti dengan ukuran dan bentuk, diantaranya.

• modal-sm
• modal-xl
• modal-fullscreen-sm-down , modal-fullscreen-md-down , modal-fullscreen-lg-down , modal-fullscreen-xl-down , modal-fullscreen-xxl-down ,
• modal-dialog-centered
• modal-dialog-scrollable

Contoh Basic Modal

Contoh Basic Modal Ads

Kami, Raffa Parabola Melayani Pemasangan Antena TV Digital & Parabola. Dan Jual Antena Digital UHF, Parabola, Receiver, Set Top Box, LNB dan Parts lainnya..

Salam,
Raffa Parabola
Hp/Wa. 0811-222-1721

Demo Static Backdrop Modal

Static backdrop modal adalah saat tampilan latar disetel ke statis, kotak modal tidak akan menutup saat mengeklik di luar kotak dialog.

Contoh Static Backdrop Modal

Kotak dialog modal tidak akan menutup saat mengeklik di luar kotak dialognya.

Demikian Cara membuat modal bootstrap 5 platform Blogger, semoga bermanfaat

Source:
w3schools, getbootstrap dan bloggers

#blogger #bootstrap