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

15 comments

  1. Dulu pas saya masih pakai platform Blogger, sering wondering gimana caranya blogger-blogger asing atau yang udah pro gitu bikin Table of Contents di blognya. Soalnya itu memudahkan banget buat pembaca untuk langsung jump to inti postingan. Sekarang saya udah pakai Squarespace jadi kayaknya nggak bisa praktekin cara ini ya, huhu. Anyway, thank you for sharing!

    ReplyDelete
    Replies
    1. Iya mbak.. saya juga baru tahu belakangan. Tapi saya Blognya mbak Ruth. Bikin betah gitu kalo disana , tone warnanya itu bikin betah banget.

      Delete
    2. Kalai dulu masih pakai cara manual.

      Delete
  2. Kak ewaaa, sang suhu blog kuuu.
    Dari mulai bullet journal, aku buat. sampai beginian nanti aku simpen biar nanti makin pinter per blogging an. Ah kak ewaa, luph luph

    ReplyDelete
    Replies
    1. Luph..luph.. hihi.. ❤️❤️❤️ semoga ada ilmu baru yang bisa saya bagi ya.. 😁😁

      Delete
  3. Replies
    1. Sama2 mbak Ninin.. semoga bisa bermanfaat ❤️

      Delete
  4. Kalau ga salah nih yah, teknik yang naruh link dalam page yang mengarah ke area tertentu yang masih di dalam satu page udah ngga recommended untuk SEO 2018. Udah ga banyak juga yg pake teknik ini hehe

    Kalo biar kelihatan terstruktur saat dibaca dan ketika bot ngecrawl sih pake H2/Subheading udah cukup, ini dari yang aku tau yaa ^^

    But nice sharing tho! :)

    ReplyDelete
    Replies
    1. Thank You mbak Nindy , barangkali begitu ya..

      Tapi beberapa artikel SEO masih tetap merekomendasikan Table Of Content. Dan dari beberapa artikel yang saya baca juga, salah satu caranya menggunakan Jump link.

      Kalo dari pengalaman sebagai pembaca, kadang Jump link juga sangat membantu sih. Membantu loncat ke bahasan tertentu.. hihihi.. apalagi yang model tutorial kadang kan puaaannjang.. hahaha.. Tapi semoga Bouncenya gak makin naik 🤣🤣🤣🤣

      Delete
  5. Aduh, Mbak Ewa.. Aku selalu langsung keringat dingin kalo udah bawa-bawa kode HTML gini. Sok-sokan ngikutin tutorial, tapi lalu, jeng.. jeng.. hancur, dan berdampak ke yang lain-lain jadi makin amburadul. Help.

    ReplyDelete
    Replies
    1. Awalnya begitu mbak.. tp kadang ngulik kode html itu ada asyiknya (kalo pas berhasil tapi hahaha... ) Berasa ketagihan nyoba yang lainnya. Hihi..

      Delete
  6. Terlalu banyak link, apakah tidak akan mempengaruhi daya loading. Kalau dari manfaatnya memang sungguh luar biasa.

    ReplyDelete
    Replies
    1. Gak tahu juga sih.. hahaha. Tapi kalo dari analisa Gt metrix kecepatan loadingku sebenarnya yang paling pengaruh banget karena adsense sama widget goodread dan affiliate. (Walaupun tetep saya pake) Kalok menurut hematku (biasanya boros 😁) sih , sebenarnya penambahan link ini kan sama halnya kalo kita nambahin link dari artikel yang berbeda tapi masih satu blog juga (internal link) , dan justru banyak di rekomendasikan. Kalo jump link kan sama aja internal link juga tapi dalam postingan. Dan gak perlu pake javascript yg ruwet sih (third party). Kalo jump link kayaknya gak terlalu ngaruh. Tp mungkin karena saya belum nemu artikel kelemahananya. Hihi..

      Delete
  7. Hallo mbak, salam kenal. Lucu amat blognya. Kusuka sekali :))

    ReplyDelete
    Replies
    1. Hi mbak Lusi.. terima kasih semoga betah. Saya juga suka blognya mbak Lusi banyak tutorialnya ❤️❤️❤️

      Delete

Hi Gaes.. Jika kalian tak menemukan kolom komentar, mohon untuk mencari artikel yang ingin dikomentari melalui Home , atau pilih label, kemudian klik " Link Komentar " , yang berwarna salmon (peach pastel). Akan muncul kolom komentar baru. Mohon maaf ketidaknyamanannya.. 🙏