DIGITAL | CARA MUDAH MEMBUAT TABLE OF CONTENT UNTUK BLOGGER DENGAN JUMP LINK

by - October 31, 2018

Cara membuat Table Of content dengan Jump link


Kalo dalam Bullet Journal ada namanya The Index. Di dalam buku ada namanya Daftar isi, nah kalo di dalam dunia Blogging, ada namanya Table Of Content alias Daftar isi (Dalam bahasa Indonesia).


Table of Content [ Daftar Isi ] :





Membuat Table Of  Content pada Blog dengan memanfaatkan fitur Jump Link pada postingan Blog kita, Kira-kira susah gak ya ?. Hmm..  Susah sih nggak, Tricky iya. Semoga bahasan saya kali ini mudah dipahami (maklum saya sering rada susah kalo ngasih penjelasan.. huhu.. sering belibet). Hihi.. Baca sampai tuntas Gaes.



***

TABLE OF CONTENT 


PENGERTIAN TABLE OF CONTENT



Apa sich Table Of Content ? 


Table of Content dalam Bahasa Indonesia disebut juga dengan nama Daftar Isi, yaitu kumpulan atau susunan judul dan nomor halaman yang menjadi Tema utama pada Bab (Chapter) tertentu dan menggambarkan atau menjelaskan poin penting dari Bab tersebut.


Abaikan Curcol Unfaedah ini


Lah trus.. apa hubungannya dengan Blog ini ?


Table of Content atau Daftar isi gak cuma bisa digunakan untuk buku loh Gaes, tapi juga kita terapkan pada Blog kita. Contohnya seperti postingan di atas Heading itu. Jika kalian mengklik linknya kalian akan dibawa langsung ke bagian penjelasanya yang ingin kalian baca. Jadi gak perlu membaca seluruh pokok bahasannya. Cukup yang ingin dibaca saja.

Proses inilah yang dikenal juga dengan  fitur Jump Link. Yaitu Link khusus yang mengarahkan kita kepada bagian tertentu dalam postingan di Blog kita.

Lalu apa bedanya Link dan Jump Link ?.


  • Link pada umumnya adalah artikel yang berasal dari luar postingan yang kita buat, sementara Jump Link adalah link artikel yang berada dalam postingan kita. 
  • Buat yang menggunakan platform Blogspot, fitur Link sudah disediakan pada Dashboard, tapi jika Jump Link kalian harus mensetupnya secara manual menggunakan Kode Html.

Baca juga : GOOGLE ADSENSE TUTORIAL


FUNGSI TABLE OF CONTENT




Apasih tujuannya dibikin Table Of Content dalam postingan Blog kita ? Emang perlu ?

Baiklah... Beberapa alasan berikut ini bisa menjadi pertimbangan kita untuk memasang Table Of Content.



  • Table Of Content memudahkan pembaca untuk mencari pokok bahasan yang ingin dibaca hanya cukup dengan mengklik link yang sudah disediakan
  • Table Of Content membantu pembaca Blog kita untuk mengetahui sebenarnya point apa saja yang ingin disampaikan oleh pemilik Blog pada postingan tersebut. 
  • Table Of Content memudahkan mesin pencari mengenali artikel kita, karena dianggap lebih informatif bagi pembaca. 
  • Table Of Content membuat postingan kita lebih terstruktur dan mudah diakses oleh pembaca. 
  • Dengan Table Of Content membuat Blog kita terlihat lebih profesional. (Aelaaaah.. hihi.. ) 

Itulah 5 Alasan kenapa kita perlu menambahkan Table of Content pada postingan Blog kita. (Maafkan saya cuma nemu 5 alasan saja.. hihi, buat teman-teman yang punya alasan lain boleh menambahkan di kolom komentar loh.. ) hehehe..




CARA MEMBUAT TABLE OF CONTENT 




Beberapa Blog yang pernah membahas masalah ini, mungkin menggunakan cara yang berbeda-beda untuk membuat Syntaxnya. Ada beberapa yang menempatkan scriptnya di (head) html, ada juga yang menggunakan kode Css. Nah diantara cara yang lainnya yang beredar di Internet, tutorial dari Kak Ilham yang paling mudah dimengerti meskipun butuh loading otak yang lama. Hihi.. Karena saya sendiri sulit mengikuti cara mereka, akhirnya saya menemukan cara yang lebih mudah saya pahami dalam membuat Table Of Content. Cara saya membuat TOC hanya menempatkan kodenya dalam html postingan. Jadi gak perlu pake script yang rumit gaes, Kalian hanya perlu memahami fungsi A href dan nama id yang akan kita gunakan sebagai nama linknya.



Lantas, Bagaimana Cara Membuat Table of Content pada Blog kita ? 


  • Yang paling utama, tentukan dulu judul [ chapter atau Bab ] yang akan digunakan sebagai Daftar isinya ( TOC : Table Of Content ).

Contoh judul untuk Table of content

  • Tulis Draft Blog seperti biasanya. Kelompokan Judul yang akan digunakan sebagai Daftar Isi dibagian paling atas / awal artikel kamu. Seperti postingan di Blog ini.
  • Cara yang paling mudah adalah dengan menggunakan list seperti contoh postingan saya (atau kalian juga bisa menggunakan Number List, tidak harus Bullet List) untuk setiap judul Bab yang akan digunakan. 
  • Manfaatkan Fungsi Heading dan Subheading untuk membedakan mana judul pokok bahasan , mana bagian ulasan. Misalnya, Untuk Judul Bab pada TOC saya menggunakan fungsi Subheading.
  • Jika postingan kalian sudah sampai akhir , kini saatnya mengutak-atik kode Html. Hehehe.. untuk membuat Kode Html kalian tak perlu keluar dari postingan. Cukup mengklik Tombol Html yang terletak disamping tombol Compose pada ujung kiri atas Dashboard kamu. Kenapa mengeditnya paling akhir ? Jia kita baru melakukannya, perlu banyak waktu untuk mengeditnya. Karena itu, supaya lebih efisien, selesaikan dulu draft postingannya baru kita utak atik html. 
  • Untuk memudahkan pada saat proses pengeditan, usahakan Judul pada bagian Daftar Isi sama dengan Judul yang kita gunakan sebagai Subheading
  • Saat sudah masuk bagian Html, Cari bagian artikel atas yang akan kita buat sebagai Daftar Isi. 
  • Pada bagian struktur TOC di bagian atas jika kalian menggunakan bullet list maka akan ada kode html menggunakan syntax (li). Tepat setelah kode (li) , tambahkan kode (a href="#1") Nama Bab Pertama (/a) << (...) Pada saat kalian menuliskan di Html tanda kurung buka ini ganti dengan simbol lebih besar lebih kecil. Pada penulisan A href ; #1 perhatikan penulisannya. Selalu tambahkan fungsi # didepan kode yang kita buat. Tanda Cross # berfungsi sebagai pemanggil link lokal. Kode ini tak harus dibarengin dengan angka 1 saja, kalian bisa menggantinya dengan nama kode buatan sendiri. Misalnya part1, part2, part3 dst. Penulisannya berarti (a href="#part1") Nama Bab 1 (/a)

Contoh penerapan syntax (li) pada edit html

  • Setelah selesai memberikan tambahan  link a href lokal pada list , saatnya kita beralih pada penambahan kode pada setiap Subheadingnya. Cari Subheading yang biasanya disimbolkan dengan (h3) Nama Subheading (/h3). Nah.. Setelah kode h3 ketemu, tambahkan kode id="kode a href" disampingnya dalam keadaan masih dalam kurung. Maka penulisan menjadi (h3 id="part1") Nama Subheading (/h3). Lakukan ke semua list yang kalian buat. Dalam hal ini, contoh yang saya gunakan hanya angka 1 sebagai id-nya dan tidak menggunakan nama part1. Lihat Gambar ! 


Buat Id nya sesuai jumlah subheading dalam list yang kalian buat. Misalnya dalam postingan ini sampai 4 .


  • Setelah semua dilakukan, jangan lupa untuk di preview lebih dulu, tanpa meninggalkan edit htmlnya. Jika dalam halaman preview , TOC bagian atas sudah rapi dan ada tanda link hidup (hover warna berubah). Pekerjaan kita sudah selesai. Hihi.. 


  • Selanjutnya tekan Publish ! Yay.. ! 



SOLUSI JIKA TERJADI ERROR





Tapi.. Ada beberapa kondisi yang perlu kita perhatikan untuk menghindari kesalahan prosesnya. Nah ini saya dapatkan dari pengalaman pribadi. Karena beberapa postingan Blog yang membahas ini, banyak yang tidak mencantumkannya. Sedih aku tuh ! Hiks.. 

Beberapa hal yang harus diperhatikan : 


  • Pemberian kode/nama untuk syntax a href harus memperhatikan besar kecilnya tulisan. Jadi ID pada A href dan H3 harus sama persis penulisannya. Jika tidak sama maka bisa dipastikan, proses akan error.
  • ID diberikan sesuai dengan jumlah list yang digunakan. Misalnya ada 5 List pokok bahasan, maka penamaan ID bisa seperti ini part1, part2, part3, part4 dan part5. (Seperti contoh table of content di atas).


  • Jika kode html sudah selesai disetup, jangan sekali-kali melakukan pengeditan lagi di bagian edit Compose karena Link A href akan berubah. Dan harus dikembalikan lagi seperti  kondisi semula. Jika tidak, link akan mengarahkan ke Draft Blog kita. Contoh perubahan yang terjadi seperti gambar di atas.


  • Jika kalian terlanjur masuk ke Compose dan mengedit beberapa bagian, Jangan panik ! Gak perlu bikin dari awal lagi, cukup hapus link yang tidak kita butuhkan pada kode a href dan mengembalikannya ke kode semula. Normalkan kembali seperi gambar diatas.

Baca Juga : CARA MEMBUAT BLOG BULLET JOURNAL

KESIMPULAN



Jadi sebenarnya bikin TOC itu gak terlalu susah asalkan kita mengikuti petunjuknya. Dan memang agak tricky aja penulisannya, oleh karena itu, pengeditan syntax (kode html) pada kolom Edit Html akan lebih aman dilakukan belakangan. Jadi kita tinggal klik Publish. 

Itulah tadi tutorial bagaimana membuat Table Of Content dengan metode Jump Link. Semoga postingan kita makin kaya akan cara penulisan, gaya penulisan, materi penulisan bahkan style penulisan. Hehe..Jika ada yang ingin ditanyakan, jangan ragu-ragu menanyakannya di kolom komentar, atau jika informasinya bermanfaat, boleh di share ke teman-temannya barangkali membutuehkan.
Buat teman-teman yang gak ingin ketinggalan informasi juga bisa langsung subscribe loh. Hihi.. sampai jumpa di postingan berikutnya..

©ewafebri

HAPPY BLOGGING ! 


You May Also Like

16 comments

OTHER ARTICLES :