Cara Buat Daftar Isi Otomatis di Blogger: Panduan Lengkap Terbaru 2024

CTB Creative

22 Sep, 2024

Cara Buat Daftar Isi Otomatis di Blogger: Panduan Lengkap Terbaru 2024

Cara Membuat Daftar Isi Otomatis, Cara Menambahkan Daftar Isi di Blogger

Apakah Anda ingin mempelajari cara menambahkan Daftar Isi di Blogger untuk postingan blog Anda? Jika ya, maka artikel ini cocok untuk Anda. Melalui penelitian saya, saya menemukan bahwa blogger baru sering kali bingung tentang apa itu Daftar Isi, manfaatnya, cara menggunakan Daftar Isi, dan cara menambahkannya ke Blogger.

Pertama-tama, saya ingin memberi tahu Anda bahwa konsep dasar Daftar Isi dicetuskan oleh penulis Pliny the Elder. Ia melakukan ini untuk memudahkan pembaca membaca, sehingga mereka dapat dengan mudah menavigasi tujuan mereka. Praktik ini awalnya diadopsi untuk memudahkan membaca buku dan kemudian diperluas ke artikel.

cara menambahkan daftar isi di blogger

Jika berbicara tentang Daftar Isi, ini adalah gabungan dari judul dan subjudul dalam sebuah posting blog. Jika Anda menulis artikel di Blogger, sebelum menambahkan Daftar Isi di Blogger, Anda harus memahami apa itu Daftar Isi. Hanya dengan begitu Anda dapat memperoleh manfaat sepenuhnya darinya. Jika Anda lalai melakukannya, Anda mungkin akan tertinggal dari pesaing Anda.

Panduan Langkah demi Langkah untuk memulai blog

Jika Anda ingin tahu cara menambahkan Daftar Isi di Blogger, pastikan untuk membaca artikel ini sampai akhir. Artikel ini akan sangat berguna bagi Anda.

Daftar isi

Cara Menambahkan Daftar Isi (TOC) di Blogger

Manfaat Daftar Isi (TOC) di Blogger

Apakah Daftar Isi membantu dalam SEO?

Bagaimana Cara Menambahkan Daftar Isi di Blogger?

Langkah 1. Login ke Blogger.com

Langkah 2. Cari tag </head>

Langkah 3. Cari Kode ]]></b:skin>

Langkah 4. Cari <data:post.body/>

Cara Menampilkan Daftar Isi Di Postingan Blogger

Langkah 1. Pilih Lokasi Kotak Daftar Isi

Langkah 2. Tambahkan Kode Ini

Kesimpulan

Q1. Bagaimana cara menyesuaikan daftar isi?

Q2. Bagaimana cara mengatur judul dalam daftar isi?

Q3. Apa itu Daftar Isi Otomatis?

Cara Menambahkan Daftar Isi (TOC) di Blogger

Daftar Isi di situs web Blogger adalah format tabel dari setiap posting yang menyediakan ikhtisar terstruktur dari posting tersebut. Dalam format tabel ini, semua judul dan subjudul yang terkait dengan posting (seperti h1, h2, h3, h4) dicantumkan. Semua judul dan subjudul posting ditampilkan kepada pengguna dalam bentuk tautan yang dapat diklik.

Saat pengguna mengunjungi halaman web dari salah satu halaman web yang disarankan di SERP (Halaman Hasil Mesin Pencari) Google, Daftar Isi membantu pengguna memahami topik apa saja yang dibahas dalam postingan tersebut. Jika pengguna memiliki waktu terbatas, mereka dapat mengeklik topik yang diinginkan di Daftar Isi di Blogger dan langsung menavigasi ke bagian tertentu tersebut.

Jika Anda menulis konten yang panjang dalam posting Anda, mirip dengan Wikipedia, sebaiknya tambahkan Daftar Isi di Blogger. Ini memudahkan pengguna Anda untuk menelusuri posting blog Anda.

Manfaat Daftar Isi (TOC) di Blogger

TOC adalah singkatan dari Table of Contents, dan muncul tepat setelah paragraf pertama dan sebelum judul H2 pada halaman web mana pun. TOC ditempatkan di lokasi ini karena saat pembaca mengunjungi posting blog Anda, perhatian mereka akan diarahkan ke daftar isi terlebih dahulu. Hal ini memungkinkan mereka untuk menavigasi ke topik yang diinginkan dengan cepat dan mudah. Menggunakan Table of Contents di Blogger dapat memberi Anda beberapa manfaat, yang telah saya uraikan di bawah ini:

Navigasi yang Disempurnakan: Daftar Isi memungkinkan pembaca untuk dengan cepat beralih ke bagian tertentu dari posting blog Anda, meningkatkan pengalaman navigasi mereka secara keseluruhan.

Pengalaman Pengguna yang Lebih Baik: Pembaca dapat memperoleh ikhtisar terstruktur tentang konten postingan, sehingga memudahkan mereka menemukan informasi yang relevan.

Hemat Waktu: Pengguna dengan waktu terbatas dapat menggunakan TOC untuk langsung menavigasi ke bagian yang paling mereka minati, menghemat waktu dan meningkatkan kepuasan pengguna.

Tampilan Profesional: Daftar Isi yang dirancang dengan baik menambahkan sentuhan profesional pada postingan blog Anda dan dapat membuatnya terlihat lebih terorganisasi.

Manfaat SEO: Memiliki TOC juga berpotensi memberikan manfaat SEO, karena mesin pencari dapat menggunakan struktur tersebut untuk memahami hierarki konten.

Rasio Pentalan Berkurang: Pembaca cenderung akan tetap berada di laman Anda dan menjelajahi berbagai bagian jika mereka dapat dengan cepat menemukan apa yang mereka cari.

Aksesibilitas: TOC sangat membantu bagi penyandang disabilitas, karena menyediakan struktur yang jelas dan terorganisir yang dapat dinavigasi dengan mudah.

Mendorong Keterlibatan: Pengguna cenderung lebih terlibat dengan konten Anda ketika mereka dapat dengan mudah menemukan informasi yang sesuai dengan minat mereka.

Opsi Kustomisasi: Blogger memungkinkan Anda menyesuaikan tampilan dan gaya Daftar Isi agar sesuai dengan desain keseluruhan blog Anda.

Retensi Pembaca: Memberikan pengalaman yang ramah pengguna dengan Daftar Isi meningkatkan kemungkinan pembaca akan tetap berada di situs Anda dan kembali untuk konten mendatang.

Apakah Daftar Isi membantu dalam SEO?

Membuat Daftar Isi (TOC) memang merupakan faktor penting dalam membuat postingan blog ramah SEO. Ini sangat membantu dalam mengoptimalkan SEO On-Page postingan Anda .

Jika Anda menulis konten yang panjang, postingan mungkin akan menjadi panjang, yang berpotensi membuat pengguna bosan. Pada tahun 2023, pengguna memiliki waktu terbatas dan lebih suka mencari informasi yang mereka butuhkan dengan cepat. Dengan menyertakan TOC, Anda membagi konten menjadi beberapa subbagian, dengan setiap bagian menyoroti topik tertentu. Hal ini tidak hanya membantu pengguna menavigasi dengan cepat ke area yang mereka minati, tetapi juga memberikan ikhtisar terstruktur tentang konten tersebut.

Selain itu, saat Anda membuat tabel dalam konten panjang Anda, setiap bagian menjadi sub-bagian, yang membahas topik tertentu. Struktur ini bermanfaat untuk SEO, meningkatkan peluang peningkatan lalu lintas situs web Anda . Selain itu, saat Anda mengintegrasikan Google AdSense ke situs web Anda, TOC dapat berkontribusi untuk meningkatkan Rasio Klik-Tayang (RKT). Jika Anda belum mendapatkan persetujuan AdSense, Anda dapat memeriksa panduan lengkap kami untuk mendapatkan persetujuan Google AdSense .

Singkatnya, Daftar Isi memainkan peran penting dalam meningkatkan pengalaman pengguna, mengoptimalkan postingan Anda untuk mesin pencari, dan berpotensi meningkatkan pendapatan melalui platform seperti Google AdSense.

Bagaimana Cara Menambahkan Daftar Isi di Blogger?

Sekarang setelah Anda mempelajari apa itu Daftar Isi dan manfaat menambahkannya, izinkan saya memandu Anda tentang cara membuat daftar isi di Blogger . Prosesnya sebagian besar melibatkan pengerjaan di bagian HTML:

Anda mungkin sudah tahu bahwa ada banyak plugin yang tersedia untuk menambahkan Daftar Isi di WordPress . Namun, jika menyangkut Blogger, cara yang paling efektif untuk menambahkan Daftar Isi adalah dengan menggunakan HTML.

Jika Anda kurang menguasai HTML, tidak perlu terlalu khawatir. Dengan mengikuti langkah-langkah yang akan saya uraikan, Anda dapat dengan mudah menambahkan Daftar Isi ke blog Blogger Anda.

Namun, penting untuk diingat untuk mencadangkan template Blogger Anda . Periksa 7 template blogger gratis teratas untuk tahun 2024. Dengan cara ini, jika ada masalah yang muncul, Anda dapat kembali ke cadangan dan memulai dari awal. Sekarang, mari kita mulai cara menambahkan Daftar Isi di Blogger:

Langkah 1. Login ke Blogger.com

Dalam hal ini, pertama-tama Anda perlu masuk ke dasbor Blogger Anda dan klik “Tema”. Periksa tema wordpress gratis

template blogger HTML

Setelah itu, Anda perlu mengklik “Edit HTML” untuk template Anda, seperti yang ditunjukkan pada gambar:

Langkah 2. Cari tag </head>

kode tag kepala

Pada langkah ini, setelah membuka Edit HTML templat Anda, Anda akan melihat beberapa kode seperti ini. Anda perlu mengeklik di mana saja pada kode ini lalu gunakan Ctrl+F untuk mencari </head>. Anda akan menemukan </head>kode yang disorot dengan warna kuning. Setelah itu, Anda perlu menempelkan kode yang disediakan di bawah ini tepat sebelum kode tersebut </head>lalu mengeklik tombol simpan untuk menyimpan perubahan Anda.

//<![CDATA[

function mbtTOC() {var mbtTOC=i=headlength=gethead=0;

headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)

{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}

//]]>

</script>

Langkah 3. Cari Kode ]]></b:skin>

b:kode kulit

Pada langkah ini, setelah menemukan kode ]]></b:skin>seperti yang ditunjukkan pada gambar, Anda perlu mencarinya. Setelah menemukan kodenya ]]></b:skin>, Anda harus menempelkan kode CSS yang disediakan di bawah ini tepat di atas kode tersebut ]]></b:skin>.

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}

.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}

.mbtTOC ul {list-style:none;}

.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}

.mbtTOC a{color:#0080ff;text-decoration:none;}

.mbtTOC a:hover{text-decoration:underline; }

.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}

.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Langkah 4. Cari <data:post.body/>

kode isi postingan data

Pada langkah ini, Anda juga perlu mengikuti proses yang sama. Pertama, Anda harus mencari <data:post.body/>, lalu setelah menemukannya <data:post.body/>, Anda perlu menggantinya dengan kode yang disediakan di bawah ini dan menyimpannya.

Semua selesai!!

Cara Menampilkan Daftar Isi Di Postingan Blogger

Sekarang saya akan memberi tahu Anda bagaimana Daftar Isi akan muncul di Postingan Blogger. Untuk itu, sangat penting untuk menyimpan kode yang diperoleh dari HTML template, karena Anda dapat menempatkan kode ini di mana saja di postingan blog Anda sesuai keinginan, seperti sebelum atau sesudah tag Heading H2. Sekarang ikuti langkah-langkah di bawah ini:

Langkah 1. Pilih Lokasi Kotak Daftar Isi

Untuk menambahkan daftar isi di Blogger, langkah pertama adalah memilih lokasinya. Meskipun Anda dapat memilih lokasi mana pun sesuai keinginan, posisi optimal untuk TOC biasanya tepat sebelum tag <h2>. Lokasi ini akan menarik perhatian pengguna terlebih dahulu.

Untuk mengintegrasikan TOC, ikuti langkah-langkah berikut:

Pilih Lokasi:

Saat berada di editor HTML postingan blog Anda, pilih tempat yang Anda inginkan untuk meletakkan Daftar Isi. Menempatkannya tepat sebelum tag <h2> sering kali merupakan pilihan yang baik.

Beralih ke Tampilan HTML:

Di editor posting Blogger Anda, cari tab “HTML” atau “Tampilan HTML”.

Sekarang, Anda dapat melanjutkan untuk menambahkan kode untuk Daftar Isi di lokasi yang dipilih dalam tampilan HTML postingan blog Anda.

beralih ke tampilan HTML

Lalu, klik di mana saja dalam kode tersebut dan cari tag judul <h2>.

tambahkan kode TOC

Setelah itu, Anda perlu menempelkan kode yang saya berikan di bawah tag dengan cara berikut:

<button onclick="mbtToggle()">Table Of Contents</button>

</div>

Langkah 2. Tambahkan Kode Ini

akhir dari postingan blog

Langkah ini merupakan langkah terakhir untuk menambahkan daftar isi di Blogger. Pada langkah ini, Anda perlu menambahkan kode yang disediakan di bawah ini di bagian paling akhir postingan blog Anda, seperti yang ditunjukkan pada gambar:

Setelah menyelesaikan langkah ini, Anda perlu menerbitkan posting blog Anda. Setelah itu, Anda akan dapat melihat hasilnya, yang menunjukkan bahwa Daftar Isi Anda telah berhasil ditambahkan. Sekarang, pengunjung Anda dapat dengan mudah menavigasi ke topik apa pun yang mereka pilih.

Kesimpulan

Teman-teman, Daftar Isi sangat penting untuk situs web apa pun, baik Blogger maupun WordPress.

Daftar Isi memandu pengunjung ke lokasi topik yang relevan dalam artikel, sehingga mereka dapat mengakses konten yang diinginkan tanpa membuang waktu. Selain itu, daftar isi membantu perayap web Google dalam merayapi posting Anda dengan lebih baik.

Jika postingan blog Anda pendek, menambahkan Daftar Isi mungkin tidak penting. Namun, jika konten Anda panjang, sebaiknya sertakan Daftar Isi di postingan Anda.

Menurut para peneliti, lebih dari 79% pembaca web hanya membaca informasi penting di halaman web. Jika Anda menempatkan diri pada posisi pembaca tersebut, Anda cenderung hanya fokus pada poin-poin penting di halaman web.

Dengan mempertimbangkan hasil ini, Anda dapat memperkirakan betapa pentingnya Daftar Isi. Daftar Isi tidak hanya meningkatkan pengalaman pengguna tetapi juga membantu SEO.

Dalam artikel di atas, Anda telah mempelajari apa itu Daftar Isi, cara menambahkannya di Blogger, manfaatnya, dan banyak lagi. Saya harap artikel ini bermanfaat untuk kebutuhan Anda.

Q1. Bagaimana cara menyesuaikan daftar isi?

Jawab. Kebanyakan blogger mungkin tidak tahu cara mengubah font, warna latar belakang, judul, dll., di kotak Daftar Isi. Saya ingin memberi tahu Anda bahwa Anda dapat dengan mudah menyesuaikan Daftar Isi sesuai dengan preferensi Anda. Saya telah memberi Anda kode “]]>”, dan Anda perlu membuat beberapa perubahan dalam kode tersebut. Kemudian, Anda dapat memberikan Daftar Isi Anda tampilan yang Anda inginkan. Ikuti poin-poin di bawah ini untuk mengubah kode:

Untuk mengubah ukuran font teks judul Daftar Isi, edit menjadi 20px.

Untuk mengubah ukuran font tautan jangkar Daftar Isi, edit menjadi 15px.

Untuk mengubah warna latar belakang kotak Daftar Isi, edit menjadi #FFFFE0.

Untuk mengubah warna batas, edit menjadi #EE5535.

Untuk mengubah warna tautan jangkar, edit menjadi #0080ff.

Terakhir, untuk mengubah warna font teks judul Daftar Isi, edit menjadi #707037.

Q2. Bagaimana cara mengatur judul dalam daftar isi?

Untuk menyusun judul di Daftar Isi, pertama-tama Anda perlu menulis judul tulisan Anda secara kronologis, mirip seperti pada karya tulis ilmiah. Setelah itu, Anda harus menulis subjudul atau subjudul. Kemudian, Anda perlu memberi nomor halaman pada judul dan subjudul.

Q3. Apa itu Daftar Isi Otomatis?

Daftar Isi Otomatis memungkinkan Anda mengatur semua tag judul dan subjudul di postingan blog Anda tanpa perubahan manual.

Terima Kasih

Checktoolsblog by CTB Creative

Cara Buat Daftar Isi Otomatis di Blogger: Panduan Lengkap Terbaru 2024

Cara Buat Daftar Isi Otomatis di Blogger: Panduan Lengkap Terbaru 2024