Cara Pasang Table Of Content Blogger (ToC)






Cara Pasang Table Of Content Blogger (ToC)

- 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.

Cara Pasang Table Of Content Blogger


Langkah 1. Masuk ke akun blogger kamu

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

Langkah 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}"


Langkah 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


Langkah 5. Buka Postingan, buat postingan baru atau juga boleh edit menggunakan artikel lama kamu untuk dijadikan TOC.

Langkah 6. Kemudian pastikan kamu berada di bagian HTML bukan Compose.

Langkah 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.

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

Langkah 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>"

Langkah 10. Selesai
Oke selamat mencoba semoga berhasil.