Cara Membuat Table of Contents (TOC) atau Daftar isi di Postingan Blogger

Topic [Show]

Membuat table toc di blogger - Tabel toc atau kepanjangan dari table of content akhir - akhir ini digunakan oleh para blogger di Indonesia bahkan di luar negeri. Awalnya fitur ini hanya di miliki oleh situs Wikipedia saja, namun seiring berjalannya waktu, para blogger berantusias untuk memasangnya di blog mereka untuk merangkum artikel yang mereka buat. Lantas apa sebenarnya fungsi tabel toc. Nah didalam pembahasan kali ini, Respontrik akan memberikan beberapa informasi lengkap tentang cara membuat table Toc dan cara memasangnya di blogger tepatnya didalam postingan. Namun sebelumnya, simaklah beberapa bab penting yang harus anda pahami.

DAFTAR ISI

1. Fungsi Table of Content
2. Keuntungan menggunakan tabel toc
3. Cara membuat table of Content di blogger
4. Cara pasangan Table toc di Blogger
5. Edit bagian Struktur penting

Fungsi Table of Content

Sebagaimana yang telah kita ketahui bersama, terkadang kita dituntut untuk membuat artikel yang panjang agar informasi yang kita buat terlihat lebih deskriptif dan terperinci. Namun sebenarnya artikel yang panjang bisa membuat pembaca enggan dan bahkan tidak mau membacanya. Jadi langkah terbaik yang harus kita lakukan sebagai seorang blogger adalah merangkumnya menjadi beberapa bab di satu halaman. Dengan demikian artikel yang panjang akan terlihat rapi dan mudah untuk di baca oleh visitor blog kita. Nah untuk memisahkan satu bab dengan bab lainya tentu kita membutuhkan sebuah fitur yang dimakan Table of Content atau biasa disebut Tabel toc. Dengan kita memasang-nya didalam blog .. maka kita bisa membuat beberapa bab dan beberapa sub judul di satu halaman.

Keuntungan menggunakan tabel toc

Beberapa keuntungan akan kita dapatkan setelah menerapkan tabel toc pada blog kita yaitu :

1. Bisa membuat beberapa sub judul dengan keyword - keyword yang kita bidik - dalam default artikel memilki judul saja dan tidak memiliki sub judul, namun ketika anda memasang tabel toc, maka anda dituntut untuk membuat Subjudul
2. Permalink tabel toc akan di index oleh Google dan bisa diklik oleh visitor - Sub judul yang anda buat akan menjadi sebuah permalink sekaligus keyword artikel yang nantinya akan muncul di hasil pencarian Google dan bisa Di klik oleh visitor / Pembaca
3. Berkesampatan mendapat sitelink di hasil pencarian Google - Apabila telah memasang tabel toc di blogger dan kebetulan artikel anda masuk page one dan di baca oleh banyak orang, maka permalink tabel toc akan menjadi sebuah sitelink yang dapat mempercantik tampilan artikel di hasil mesin pencari seperti Google.

Cara membuat table of Content di blogger

Nah bagi anda yang ingin membuat tabel toc "table of content" di blogger maka bisa langsung Copy Script dan HTMl dibawah ini.

<style> #btn_toc{font-weight:bold;cursor:pointer} #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none} #btn_toc svg{vertical-align:middle}
#toc li,.back_toc{cursor:pointer;} .back_toc{background:#ff0000;margin:1px;padding:3px;color:#fff;text-align:center;}

#toc{display:grid;background:#F8F8FF} h4{color:green;font-weight:bold;} :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden;}</style>

<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">DAFTAR ISI<svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>

<div id="toc"><ol> <li><a href="#toc_1" title="RESPONTRIK">Subjudul</li> </ol></div><br> <h4 id="toc_1">Sub heading</h4><

Kode HTML, JS dan CSS diatas merupakan script untuk membuat table of content di blogspot. Silahkan anda Copy dan pasang di blog Anda. Nah ada beberapa bagian penting yang bisa anda sesuaikan sendiri agar terlihat lebih rapi dan nyaman untuk di baca nantinya. Silahkan perhatikan bab dibawah ini untuk cara setting table toc blogger

Edit bagian Struktur penting

Silahkan ubah dan sesuaikan bagian
1. Kata "DAFTAR ISI" - Silahkan Ganti dengan kata yang anda inginkan
2. Kode background #F8F8FF - Silahkan ganti dengan warna background yang anda inginkan
3. tutle="RESPONTRIK" - silahkan ganti kata Respontrik dengan Title artikel anda sesuai judul artikel
4. h4{color:green;font-weight:bold;} - Color green berarti sub Heading berwarna hijau, font-weight:bold berarti sub Heading tercetak tebal. Silakan anda ganti sesuai kebutuhan. Silahkan ingin merubah menjadi warna merah maka Ganti kode warnanya dan jika ingin Text Heading tampil biasa, maka hapus kode "font-weight:bold", Anda juga bisa memilih jenis heading sesuai kebutuhan.

Cara pasangan Table toc di Blogger

Cara pemasangan tabel toc blogger ini sedikit rumit dan tekan bisa berjalan otomatis seperti di wordpress yang menggunakan plugin easy tabel of Content. Namun tidak ada salahnya untuk anda coba demi mendapatkan beberapa keuntungan seperti yang telah Respontrik jelaskan diatas. Nah langkah langkahnya yaitu:

Pertama - Silakan copy CSS tabel toc blogger diatas dan pastekan di template blogger, tepatnya diatas kode </head>
Kedua - Silahkan Copy seruh code Script dan HTML dan pergi ke Halaman Entribaru untuk langkah uji Coba
Ketiga - Silakan pastekan kode Script HTML ke dalam artikel .. anda bisa memangnya di bagian atas artikel, atau di tengah artikel.
Keempat - Sekarang Silahkan fokus pada kode toc_1, apabila anda membuat lebih dari satu .. maka anda bisa menambahkan kode toc sesuai jumlah sub judul yang akan anda buat. Contoh untuk membuat 5 sub judul didalam postingan, maka kodenya adalah:

• <li><a href="#toc_1"title">Sub judul</a></li>
  <li><a href="#toc_2"title">Sub judul</a></li>
  <li><a href="#toc_3"title">Sub judul</a></li>
  <li><a href="#toc_4"title">Sub judul</a></li>
  <li><a href="#toc_5"title">Sub judul</a></li>
  <li><a href="#toc_6"title">Sub judul</a></li>
  dan seterusnya ...
  
  Sedangkan ini adalah kode toc yang akan muncul ...
  <h4 id="toc_1>Contoh table toc blogger</h4>
  <h4 id="toc_2>Contoh table toc blogger</h4>
  <h4 id="toc_3>Contoh table toc blogger</h4>
  <h4 id="toc_4>Contoh table toc blogger</h4>
  <h4 id="toc_5>Contoh table toc blogger</h4>
  <h4 id="toc_6>Contoh table toc blogger</h4>
  dan seterusnya ...

Bagaimana menurut anda... Sekarang giliran anda praktek membuat teble toc dan memasanganya sendiri di blog anda. Apabila ada yang ingin di tanyakan bisa langsung melalui komentar ya dan jangan Lupa share artikel ini teman - teman.