Membuat Table Of Contents (TOC) di Blogger

Untuk mendapatkan jump link biasanya kita membuat Table Of Contents (TOC) atau bisa disebut juga dengan daftar isi. Untuk membuat Table Of Contents ini sangat mudah kamu hanya perlu memanfaatkan penggunaan ID pada HTML. Namun bila masih kurang paham, admin akan menjelaskan cara pembuatan Table of Contents untuk halaman postingan di blogspot secara detail.

Table Of Contents sering kita jumpai di Microsoft Word yang berfungsi untuk mengetahui daftar isi dalam lembar kerja tersebut. Membuat TOC di halaman postingan blog bisa membuat daya tarik sendiri bagi pengunjungnya.

Table Of Contents juga digunakan oleh web-web besar, contohnya wikipedia. Bila kita berkunjung ke halaman posting wikiedia pasti kita akan berjumpa dengan TOC ini. Maka dari itu disini saya akan menjelaskan cara membuat Table Of Content di blogger. Perhatikan langkah-langkah berikut ini dengan benar

Table Of Content

Cara Membuat Table Of Contents di Halaman Postingan Blogger

1. Masuk ke akun blogger kamu

2, Kemudian pilih Tema yang ada di sidebar kiri -> lalu pilih Edit HTML

3. Salin kode di bawah ini, kemudian paste/tempelkan di aias kode ]]></b:skin> atau </style>

/* Table of Contents (TOC) */

#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}

#btn_toc{font-weight:700;cursor:pointer;margin:10px}

#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}

#btn_toc svg{vertical-align:middle}

#toc li{cursor:pointer}

#toc{display:grid}

.back_toc{cursor:pointer;text-align:right}

:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden} 

4. Jika sudah lalu klik simpan tema

Note: perhatikan kode di atas, Jika kamu menggunakan menu navigasi sticky, silahkan atur bagian height:40px;margin-top:-40px. Jika kamu tidak menggunakan menu navigasi sticky, silahkan hapus kode tersebut.

Sekarang waktunya kita terapkan di postingan blog.
5. Buka Postingan, buat postingan baru atau juga boleh edit menggunakan artikel lama kamu untuk dijadikan TOC

6. Kemudian pastikan kamu berada di bagian HTML bukan Compose

7. Copy kode di bawah ini, pastikan kamu menempatkannya sesuai selera kamu

<div id="btn-cm">

<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">Contents <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="Subheading 1">Subheading 1</a></li>

  <li><a href="#toc_2" title="Subheading 2">Subheading 2</a></li>

  <li><a href="#toc_3" title="Subheading 3">Subheading 3</a></li>

  <li><a href="#toc_4" title="Subheading 4">Subheading 4</a></li>

</ol>

</div>

</div> 

Note:
- Tambahkan URL postingan kamu sebelum #toc_1 dan seterusnya.
- Kamu juga dapat menambahkan  #toc_5 dan seterusnya.

8. Lalu tambahkan id="toc_1" pada heading tag. Contohnya:
<h3>Subheading 1</h3> menjadi <h3 id="toc_1">Subheading 1</h3>
Dan seterusnya

9. Salin kode di bawah ini, lalu Paste pada bagian terakhir masing-masing paragraf. (berfungsi untuk kembali ke menu daftar isi)

<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Back to Content ↑</div> 

**Kode bisa di copy melalui PC/Laptop, caranya block kode kemudian tekan keyboard Ctrl + C

Lokasi:

Berbagi :