Layout dan Navigasi

13 Mar 2025 -

Materi tentang Layout dan Navigasi

Layout dan Navigasi 🖥️

Layout di Jekyll digunakan untuk membuat struktur halaman yang konsisten di seluruh situs. Layout ini memungkinkan kamu mengatur header, footer, dan elemen lainnya di seluruh halaman blog kamu.

Menyiapkan Layout:

File _layouts/default.html adalah template dasar yang akan digunakan oleh halaman lain. Berikut adalah contoh layout untuk halaman utama dengan navigasi:

```html <!DOCTYPE html>
Layout dan Navigasi
- Home
- About
- Blog
Belajar Markdown & HTML

06 Mar 2025 -

Materi tentang Markdown dan HTML

Belajar Markdown dan HTML 📚

Markdown adalah bahasa penulisan teks yang ringan dan digunakan di banyak platform seperti GitHub dan Jekyll. Dengan Markdown, kamu bisa menulis konten yang mudah dibaca dan otomatis diubah menjadi HTML.

Struktur Markdown Dasar:

Heading:
```
# Heading 1
## Heading 2
### Heading 3
```
Paragraf: Cukup ketik teks biasa untuk membuat paragraf.
```
Ini adalah paragraf pertama saya.
```
Daftar:
- Daftar tidak berurutan: ```markdown
  - Item 1
  - Item 2
  - Item 3 ```
- Daftar berurutan: ```markdown
  1. Langkah pertama
  2. Langkah kedua
  3. Langkah ketiga ```
Tautan: Menambahkan tautan sangat mudah dengan Markdown.
```
[Google](https://www.google.com)
```

Gambar:

![Alt Text](https://linkgambar.com/gambar.jpg)

Keuntungan Menggunakan Markdown:

Ringan dan mudah dipelajari: Cukup dengan simbol dasar seperti # untuk heading dan - untuk list.
Berguna untuk blog: Markdown memudahkan pembuatan artikel yang dapat langsung diproses menjadi HTML.

</main>

   <footer>
     <p>&copy; 2025 Balqis Misyia</p>
   </footer>
 </body>

</html> ```

Navigasi: Navigasi adalah bagian penting dari setiap website. Di atas, kita sudah membuat navigasi dasar menggunakan <ul> untuk daftar tautan.

Menambahkan Halaman:

About Page: Buat halaman about.md dengan konten tentang kamu, dan Jekyll akan otomatis menghubungkannya dengan navigasi.

Tips:

Jangan lupa untuk menambahkan CSS di file assets/css/style.css agar tampilan lebih menarik.
Gunakan partials untuk elemen yang sering muncul seperti header dan footer, supaya kamu tidak perlu menulis kode yang sama berulang-ulang.