Bootstrap - Blog Demo
Apa itu blog?
Hai sana, para pengembang web yang berambisi! Hari ini, kita akan melompat ke dunia yang menarik dari blogging menggunakan Bootstrap. Tetapi sebelum kita merusaknya dengan kode, mari kitaambil sedikit waktu untuk memahami apa sebenarnya blog itu.
Blog, singkatan dari "weblog," adalah situs web atau halaman web yang diperbarui secara teratur, biasanya dikelola oleh individu atau kelompok kecil, yang ditulis dalam gaya informal atau konversasional. Itu seperti diary daring tempat orang berbagi pikiran, pengalaman, atau pengetahuan mereka tentang berbagai topik.
Saya ingat saat pertama kali saya mulai blogging di awal tahun 2000-an. Itu adalah cara revolusioner untuk terhubung dengan orang di seluruh dunia yang memiliki minat yang sama. Sekarang, mari kita lihat bagaimana kita dapat membuat blog sendiri menggunakan Bootstrap!
Menyiapkan Demo Blog Bootstrap kita
Langkah 1: Struktur HTML Dasar
Mari kita mulai dengan struktur HTML dasar untuk blog kita. Buat file baru yang dinamai index.html dan tambahkan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Awesome Blog</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Konten blog kita akan masuk di sini -->
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ini menyiapkan struktur HTML dasar kita dan menyertakan file Bootstrap CSS dan JavaScript yang diperlukan. Pihak ini seperti kerangka blog kita - kita akan menambahkan daging dan otot (konten dan gaya) nanti!
Langkah 2: Membuat Batang Navigasi
Sekarang, mari kita tambahkan batang navigasi ke blog kita. Masukkan kode berikut langsung setelah tag <body>:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Awesome Blog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>Kode ini membuat batang navigasi responsif dengan tautan ke halaman Home, About, dan Contact. Klas navbar-expand-lg memastikan bahwa navbar membuka pada layar yang lebih besar dan collapse menjadi menu hamburger pada layar yang lebih kecil. Itu seperti memiliki GPS untuk blog anda - membantu pembaca untuk menavigasi melalui konten anda!
Langkah 3: Menambahkan Area Konten Utama
Berikutnya, mari kita buat area konten utama untuk postingan blog kita. Tambahkan kode ini setelah batang navigasi:
<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- Postingan blog akan masuk di sini -->
</div>
<div class="col-md-4">
<!-- Konten sidebar akan masuk di sini -->
</div>
</div>
</div>Ini membuat wadah dengan dua kolom: satu untuk postingan blog (8 kolom lebar) dan satu untuk sidebar (4 kolom lebar). Itu seperti membagi kamar anda menjadi area belajar dan area rekreasi - masing-masing berfungsi untuk tujuan tertentu!
Langkah 4: Membuat Postingan Blog
Sekarang, mari kita tambahkan postingan blog contoh. Masukkan kode ini di tempat kita tinggalkan komentar untuk postingan blog:
<article class="blog-post">
<h2 class="blog-post-title">Postingan Blog Contoh</h2>
<p class="blog-post-meta">1 Januari 2023 oleh <a href="#">Mark</a></p>
<p>Ini adalah beberapa konten paragraf pengganti. Itu telah ditulis untuk mengisi ruang yang tersedia dan menunjukkan bagaimana snippet teks yang lebih panjang mempengaruhi konten sekitarnya. Kita akan mengulanginya sering untuk menjaga demo berjalan, jadi hati-hati untuk mencari string teks yang sama ini.</p>
<h3>Sub-judul</h3>
<p>Ini adalah beberapa konten paragraf pengganti. Itu telah ditulis untuk mengisi ruang yang tersedia dan menunjukkan bagaimana snippet teks yang lebih panjang mempengaruhi konten sekitarnya. Kita akan mengulanginya sering untuk menjaga demo berjalan, jadi hati-hati untuk mencari string teks yang sama ini.</p>
<a href="#" class="btn btn-primary">Baca lebih lanjut</a>
</article>Ini membuat postingan blog sederhana dengan judul, informasi meta, paragraf, dan tombol "Baca lebih lanjut". Itu seperti menulis surat kepada pembaca anda, berbagi pikiran dan ide anda!
Langkah 5: Menambahkan Konten Sidebar
Akhirnya, mari kita tambahkan konten ke sidebar kita. Masukkan kode ini di tempat kita tinggalkan komentar untuk konten sidebar:
<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">Selamat datang di My Awesome Blog! Disini, saya berbagi pikiran tentang teknologi, coding, dan kehidupan sebagai pengembang.</p>
</div>
<div class="p-4">
<h4 class="font-italic">Arsip</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">Maret 2023</a></li>
<li><a href="#">Februari 2023</a></li>
<li><a href="#">Januari 2023</a></li>
</ol>
</div>
<div class="p-4">
<h4 class="font-italic">Di Tempat Lain</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>Ini menambahkan section "About", arsip postingan lalu, dan tautan ke profile media sosial. Itu seperti menambahkan sentuhan pribadi ke blog anda, memberikan pembaca pandangan ke siapa anda dan apa yang anda tulis!
Kesimpulan
Dan itu adalah - struktur dasar untuk blog Bootstrap! Tentu saja, ini hanya awal. Anda dapat menyesuaikan warna, menambahkan postingan lain, menyertakan gambar, dan banyak lagi. Kunci adalah mulai sederhana dan bangun dari sana.
Ingat, membuat blog tidak hanya tentang kode - itu tentang berbagi suara anda ke dunia. Jadi, jangan takut untuk mencoba, membuat kesalahan, dan terutama, bersenang-senang dengan itu!
Happy coding, dan semoga blog anda terisi dengan konten yang menarik dan menginspirasi orang lain!
| Metode | Deskripsi |
|---|---|
| Bootstrap CDN | Digunakan untuk menyertakan file CSS dan JS Bootstrap |
| Kontainer | Membuat wadah yang terpusat untuk konten |
| Baris | Membuat kelompok kolom horizontal |
| Kolom | Menentukan lebar kolom untuk berbagai ukuran layar |
| Navbar | Membuat header navigasi responsif |
| Article | Elemen HTML5 semantik untuk konten yang mandiri dan terpisah |
| Tombol | Membuat tombol yang dapat diklik |
Credits: Image by storyset