Cara Membuat Table of Content di Blogger
Table of content atau daftar isi adalah salah satu elemen penting dalam sebuah blog. Table of content berfungsi untuk memudahkan pembaca menemukan topik atau subtopik yang ingin mereka baca dalam sebuah artikel panjang. Selain itu, table of content juga dapat meningkatkan SEO blog, karena dapat membantu Google memahami struktur dan konten artikel Anda.
Namun, sayangnya, Blogger tidak menyediakan fitur bawaan untuk membuat table of content secara otomatis. Anda harus membuatnya secara manual dengan menggunakan kode HTML dan CSS. Jika Anda tidak familiar dengan kode-kode tersebut, jangan khawatir. Dalam artikel ini, saya akan menjelaskan langkah-langkah mudah untuk membuat table of content di Blogger dengan menggunakan kode HTML dan CSS yang sudah saya sediakan.
Langkah 1: Menyiapkan Kode HTML dan CSS
Sebelum Anda mulai membuat table of content, Anda harus menyiapkan kode HTML dan CSS yang akan digunakan. Kode HTML dan CSS ini berfungsi untuk membuat tampilan dan gaya dari table of content Anda. Anda bisa mengubah kode ini sesuai dengan keinginan Anda, misalnya mengganti warna, ukuran, atau bentuk dari table of content.
Berikut adalah kode HTML dan CSS yang saya gunakan untuk membuat table of content:
<style>
#toc {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
margin: 20px 0;
}
#toc h3 {
font-weight: bold;
margin: 0;
}
#toc ul {
list-style: none;
margin: 0;
padding: 0;
}
#toc li {
margin: 5px 0;
}
#toc a {
color: #333;
text-decoration: none;
}
#toc a:hover {
color: #000;
}
</style>
<div id="toc">
<h3>Daftar Isi</h3>
<ul>
</ul>
</div>Kode HTML di atas berisi elemen <div> dengan id="toc" yang akan menjadi wadah dari table of content Anda. Di dalam elemen <div> tersebut, terdapat elemen <h3> yang berisi judul "Daftar Isi", dan elemen <ul> yang akan berisi daftar link ke setiap subjudul dalam artikel Anda.
Kode CSS di atas berisi aturan-aturan untuk mengatur tampilan dan gaya dari elemen-elemen tersebut. Misalnya, saya memberikan warna latar belakang abu-abu (#f0f0f0), garis tepi abu-abu (#ccc), jarak tepi (padding) 10 piksel, dan jarak luar (margin) 20 piksel pada elemen <div> dengan id="toc". Anda bisa mengubah nilai-nilai ini sesuai dengan selera Anda.
Langkah 2: Menambahkan Kode HTML dan CSS ke Blogger
Setelah Anda menyiapkan kode HTML dan CSS, langkah selanjutnya adalah menambahkan kode tersebut ke Blogger. Ada dua cara untuk menambahkan kode HTML dan CSS ke Blogger, yaitu melalui mode HTML atau mode Compose.
Cara pertama adalah melalui mode HTML. Mode HTML adalah mode yang memungkinkan Anda menulis atau menyisipkan kode HTML langsung ke dalam artikel Anda. Untuk menggunakan mode ini, Anda harus mengklik tombol HTML di pojok kanan atas editor artikel Blogger.
Setelah Anda masuk ke mode HTML, Anda bisa menyalin dan menempel kode HTML dan CSS yang sudah Anda siapkan di langkah sebelumnya ke posisi yang Anda inginkan dalam artikel Anda. Biasanya, table of content diletakkan di awal atau di bawah judul utama artikel.
Cara kedua adalah melalui mode Compose. Mode Compose adalah mode yang memungkinkan Anda menulis artikel dengan tampilan yang lebih visual, tanpa harus mengetik kode HTML. Untuk menggunakan mode ini, Anda harus mengklik tombol Compose di pojok kanan atas editor artikel Blogger.
Setelah Anda masuk ke mode Compose, Anda bisa menambahkan kode HTML dan CSS dengan menggunakan fitur HTML/JavaScript gadget. Fitur ini berfungsi untuk menyisipkan kode HTML atau JavaScript ke dalam artikel Anda. Untuk menggunakan fitur ini, Anda harus mengklik tombol Insert di toolbar editor, lalu pilih HTML/JavaScript.
Setelah itu, Anda akan melihat jendela baru yang berisi kotak teks untuk memasukkan kode HTML atau JavaScript. Anda bisa menyalin dan menempel kode HTML dan CSS yang sudah Anda siapkan di langkah sebelumnya ke dalam kotak teks tersebut. Lalu, klik tombol Save untuk menyimpan kode tersebut.
Setelah Anda menyimpan kode tersebut, Anda akan melihat sebuah ikon HTML/JavaScript gadget di posisi yang Anda inginkan dalam artikel Anda. Anda bisa menggeser ikon tersebut untuk mengubah posisinya. Biasanya, table of content diletakkan di awal atau di bawah judul utama artikel.
Langkah 3: Menambahkan Link ke Setiap Subjudul
Setelah Anda menambahkan kode HTML dan CSS ke Blogger, langkah terakhir adalah menambahkan link ke setiap subjudul dalam artikel Anda. Link ini berfungsi untuk menghubungkan table of content dengan subjudul-subjudul yang ada dalam artikel Anda. Dengan begitu, pembaca bisa langsung melompat ke subjudul yang ingin mereka baca dengan mengklik link tersebut.
Untuk menambahkan link ke setiap subjudul, Anda harus menggunakan atribut id dan href dalam elemen <a> dan <h>. Atribut id berfungsi untuk memberikan nama unik pada setiap subjudul, sedangkan atribut href berfungsi untuk memberikan alamat tujuan pada setiap link.
Berikut adalah contoh cara menambahkan link ke setiap subjudul:
<h2 id="langkah-1">Langkah 1: Menyiapkan Kode HTML dan CSS</h2>
<p>...</p>
<h2 id="langkah-2">Langkah 2: Menambahkan Kode HTML dan CSS ke Blogger</h2>
<p>...</p>
<h2 id="langkah-3">Langkah 3: Menambahkan Link ke Setiap Subjudul</h2>
<p>...</p>
<div id="toc">
<h3>Daftar Isi</h3>
<ul>
<li><a href="#langkah-1">Langkah 1: Menyiapkan Kode HTML dan CSS</a></li>
<li><a href="#langkah-2">Langkah 2: Menambahkan Kode HTML dan CSS ke Blogger</a></li>
<li><a href="#langkah-3">Langkah 3: Menambahkan Link ke Setiap Subjudul</a></li>
</ul>
</div>
Pada contoh di atas, saya memberikan atribut id="langkah-1" pada elemen <h2> yang berisi subjudul "Langkah 1: Menyiapkan Kode HTML dan CSS". Kemudian, saya memberikan atribut href="#langkah-1" pada elemen <a> yang berisi teks "Langkah 1: Menyiapkan Kode HTML dan CSS" di dalam table of content. Dengan begitu, jika pembaca mengklik teks tersebut, mereka akan langsung dibawa ke subjudul "Langkah 1: Menyiapkan Kode HTML dan CSS".
Anda bisa mengulangi langkah ini untuk setiap subjudul yang ada dalam artikel Anda. Pastikan bahwa nilai dari atribut id dan href sesuai dengan nama subjudul yang ingin Anda hubungkan.
Kesimpulan
Demikianlah cara membuat table of content di Blogger dengan menggunakan kode HTML dan CSS. Dengan table of content, Anda bisa membuat artikel Anda lebih rapi
: