Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Daftar Isi Artikel Otomatis di Template VioMagz

VioMagz merupakan salah satu template blogger yang cukup populer. Template ini dikembangkan oleh Mas Sugeng, salah satu blogger legend yang sudah lama berkecimpung di dunia blog dan pembuatan template blogger.

Daftar Isi

Sekilas tentang VioMagz

Template VioMagz mulai dirilis pada tahun 2018 dan sampai kini terus diperbarui. Saat artikel ini dirilis, VioMagz terakhir diupdate pada bulan Januari 2022.

Dari segi fitur dan kelebihan, tema blogger VioMagz mengambil semua yang terbaik dari salah satu tema buatan Mas Sugeng sebelumnya bernama Evo Magz, kemudian membuatnya menjadi lebih baik lagi.

Namun template VioMagz belum punya fitur daftar isi otomatis pada artikel. 

Fitur ini mirip seperti yang dimiliki oleh Wikipedia. Jadi ketika kita ingin menuju ke bahasan tertentu, kita bisa langsung mengeklik bagian tersebut di bagian daftar isi dan melewati bahasan yang tidak perlu.

Contoh fitur yang dimaksud adalah seperti berikut:

Nah, di artikel ini kita akan coba membuat daftar isi otomatis pada artikel dan menambahkan fitur ini ke template VioMagz. Simak sampai habis, ya.

Kelebihan dan Manfaat Membuat Daftar Isi pada Artikel

Fitur ini sangat membantu apabila Anda memiliki artikel yang dibagi-bagi ke dalam beberapa subjudul.

Contohnya seperti artikel yang sedang Anda baca ini. Artikel ini memiliki judul “Cara Membuat Daftar Isi Otomatis pada Artikel di Template VioMagz” dan memiliki subjudul:

  • Sekilas tentang VioMagz
  • Kelebihan dan Manfaat Membuat Daftar Isi pada Artikel
  • Langkah-langkah Membuat Daftar Isi Artikel Otomatis di Template VioMagz
  • Penutup

Kelebihan membuat artikel yang dibagi ke dalam subjudul akan memudahkan mesin pencari seperti Google untuk mengindeks isi artikel yang kita punya.

Menambahkan daftar isi pada artikel juga akan memudahkan pengunjung blog kita jika ingin berpindah-pindah pada subjudul tertentu yang dikehendaki, tanpa harus banyak scroll. 

Selain itu, Google sangat menyukai blog yang punya daftar isi. Salah satu yang spesial adalah saat artikel blog kita masuk pada laman hasil pencarian, maka di bawah paragraf deskripsi akan muncul link berisi subjudul dari isi konten artikel kita. Saat diklik akan langsung dibawa menuju bagian tersebut.

Contohnya adalah seperti artikel trivusi.web.id berikut:

Langkah-langkah Membuat Daftar Isi Artikel Otomatis di Template VioMagz

Artikel ini akan memandu Anda langkah demi langkah untuk membuat daftar isi otomatis pada artikel di template Viomagz. 

Berikut adalah langkah-langkahnya:

  1. Buka laman blogger, pilih situs blogger yang Anda punya
  2. Klik pada menu Layout yang ada pada sidebar menu sebelah kiri jika sobat membuka melalui dekstop


  3. Setelah halaman berhasil dimuat, klik tombol edit berbentuk ikon pensil pada bagian Custom CSS
  4. Kemudian salin dan tempelkan kode CSS berikut ke kotak yang disediakan. Jika sudah, klik tombol Save

  5. Selanjutnya klik tombol edit berbentuk ikon pensil pada bagian Custom JavaScript Footer
  6. Kemudian salin dan tempelkan kode JavaScript berikut ke kotak yang disediakan. Jika sudah, klik tombol Save

  7. Sampai sini fitur ini sudah bisa Anda gunakan. Untuk membuktikan kita coba buat artikel baru. Caranya klik tombol New Post di sidebar sebelah kiri.
  8. Buat artikel dengan struktur serupa dengan ini


  9. Setelah selesai menulis, ganti mode editor ke mode HTML view
  10. Tambahkan kode HTML berikut di tempat yang Anda inginkan (misalnya sebelum subjudul pertama). Kode ini nantinya akan meng-generate secara otomatis subjudul dari artikel dan membuatkan link yang sesuai.

Berikut adalah hasilnya:

Penutup

Demikianlah artikel mengenai cara membuat daftar isi artikel otomatis di template VioMagz. Dengan mengikuti tutorial ini semoga Anda berhasil menerapkannya ke blog Anda sendiri. Semoga bermanfaat.

Jika Anda suka dengan artikel serupa terkait tutorial dan blogging, Anda bisa mengunjungi rubrik Tutorial atau membaca artikel lainnya mengenai "Cara Mengganti Jenis Font pada Template VioMagz".

Salam!

Trivusi
Trivusi Ikatlah ilmu dengan menulis. Menebar manfaat dengan berbagi :)

15 komentar untuk "Cara Membuat Daftar Isi Artikel Otomatis di Template VioMagz"

  1. cara supaya pertama kali di buka toc sembunyi bagaimana? kayak blog ente?

    BalasHapus
    Balasan
    1. Kalau ingin menyembunyikan list-nya, ubah kode pada langkah ke 10 baris kode ke dua sebelum tanda > tambahkan kode checked

      Hapus
    2. Masih belum paham gan.. mohon berikan contohnya

      Hapus
  2. Terimakasih atas ilmunya bang semoga berkah

    BalasHapus
  3. Kalau mau diletakkan di dalam template dimana peletakan kodenya gan, soale bukan template viomagz

    BalasHapus
  4. Thx ilmunya sangat bermanfaat.
    Btw untuk tambahin author box di bawah postingan kaya di blog ini gimana ya caranya ?

    BalasHapus
    Balasan
    1. Buka menu layout (tata letak), pada gadget "Postingan Blog" aktifkan toggle tampilkan profil penulis

      Hapus
  5. bang boleh bagi template blog ini gak?

    BalasHapus
  6. Bang cara buat drak mode bagaimana?

    BalasHapus
  7. Hallo mimin, terima kasih atas sharingnya. Terkait point ini....
    "Setelah halaman berhasil dimuat, klik tombol edit berbentuk ikon pensil pada bagian Custom CSS
    Kemudian salin dan tempelkan kode CSS berikut ke kotak yang disediakan. Jika sudah, klik tombol Save"

    Artinya saya tidak perlu buka tema blog dan (masuk format HTML) lagi kan?.

    Mohon dijawab mas admin. Soalnya saya masukan kode ini di atas ]]> tidak work min... Mohon pencerahannya mimin.... Terima kasih banyak sebelumnya.

    BalasHapus
    Balasan
    1. Tidak perlu menambahkan apapun pada berkas kode template blog

      Hapus
    2. Saya sudah coba mas, berhasil tetapi sepertinya tidak sempurna. Mungkin ada sesuatu yang saya lewatkan kali ya mas. Terima kasih banyak sudah menjawabnya mas.

      Hapus


Komentar SPAM akan disensor. Harap gunakan kalimat yang tidak menjurus pada SARA dan pornografi.