Bootstrap - Blog Demo

Apa itu blog?

Hai sana, para pengembang web yang berambisi! Hari ini, kita akan masuk ke dunia menarik dari blogging menggunakan Bootstrap. Tetapi sebelum kita merusak kode, mari kitaambil sedikit waktu untuk memahami apa sebenarnya adalah blog.

Blog, singkatan dari "weblog," adalah situs web atau halaman web yang diperbarui secara teratur, biasanya dijalankan oleh individu atau kelompok kecil, yang ditulis dalam gaya informal atau konversasional. Itu seperti日记 daring di mana 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 lihat bagaimana kita bisa membuat blog sendiri menggunakan Bootstrap!

Menyiapkan Demo Blog Bootstrap

Langkah 1: Struktur HTML Dasar

Mari kita mulai dengan struktur HTML dasar untuk blog kita. Buat file baru yang disebut index.html dan tambahkan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Saya yang Menakjubkan</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 berada 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. PERTimbangkan ini sebagai kerangka blog kita - kita akan menambahkan daging dan otot (konten dan gaya) kemudian!

Langkah 2: Menambahkan Baris Navigasi

Sekarang, mari tambahkan baris navigasi ke blog kita. Sisipkan kode berikut langsung setelah tag <body>:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Blog Saya yang Menakjubkan</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="#">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tentang</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontak</a>
</li>
</ul>
</div>
</div>
</nav>

Kode ini membuat baris navigasi responsif dengan tautan ke halaman Beranda, Tentang, dan Kontak. Kelas 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 menjelajahi konten Anda!

Langkah 3: Menambahkan Area Konten Utama

Berikutnya, mari buat area konten utama untuk postingan blog kita. Tambahkan kode ini setelah baris navigasi:

<div class="container mt-4">
<div class="row">
<div class="col-md-8">
<!-- Postingan blog akan berada di sini -->
</div>
<div class="col-md-4">
<!-- Konten sidebar akan berada 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 untuk tujuan tertentu!

Langkah 4: Membuat Postingan Blog

Sekarang, mari tambahkan postingan blog contoh. Sisipkan kode ini di tempat yang ditandai 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 konten paragraf placeholder tambahan. Ini 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 pantaulah string teks yang sama persis ini.</p>

<h3>Sub-judul</h3>
<p>Ini adalah konten paragraf placeholder tambahan. Ini 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 pantaukan string teks yang sama persis ini.</p>

<a href="#" class="btn btn-primary">Baca lebih banyak</a>
</article>

Ini membuat postingan blog sederhana dengan judul, informasi meta, paragraf, dan tombol "Baca lebih banyak". Itu seperti menulis surat kepada pembaca Anda, berbagi pikiran dan ide Anda!

Langkah 5: Menambahkan Konten Sidebar

Akhirnya, mari tambahkan beberapa konten ke sidebar kita. Sisipkan kode ini di tempat yang ditandai untuk konten sidebar:

<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">Tentang</h4>
<p class="mb-0">Selamat datang di Blog Saya yang Menakjubkan! Di sini, saya berbagi pikiran tentang teknologi, pemrograman, 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 bagian "Tentang", arsip postingan, dan tautan ke media sosial. Itu seperti menambahkan sentuhan pribadi ke blog Anda, memberikan pembaca pandangan ke siapa Anda dan apa yang Anda tulis!

Kesimpulan

Dan begitu Anda mendapatkannya - struktur dasar untuk blog Bootstrap! Tentu saja, ini hanya awal. Anda dapat menyesuaikan warna, menambahkan lebih banyak postingan, termasuk gambar, dan banyak lagi. Kunci adalah mulai sederhana dan bangun dari sana.

Ingat, membuat blog tidak hanya tentang kode - itu tentang berbagi suara Anda dengan dunia. Jadi, jangan khawatir untuk eksperimen, membuat kesalahan, dan terutama, bersenang-senang dengan itu!

Selamat pemrograman, dan semoga blog Anda penuh dengan konten yang menakjubkan yang menginspirasi dan mendidik orang lain!

Metode	Deskripsi
Bootstrap CDN	Digunakan untuk menyertakan file CSS dan JS Bootstrap
Kontainer	Membuat wadah yang terpusat untuk konten
Baris	Membuat grup kolom horizontal
Kolom	Menentukan lebar kolom untuk ukuran layar berbeda
Navbar	Membuat header navigasi responsif
Article	Elemen HTML5 semantik untuk konten independen, self-contained
Button	Membuat tombol yang dapat diklik

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Demo Navigasi

Tutorial Selanjutnya:

Bootstrap - Demo Slider