Cara Membuat Daftar Isi di Artikel Blogger (Table Of Content) Mirip Wikipedia

Cara Membuat Table of Contents (TOC) Atau Daftar Isi di Dalam Postingan Blogger – Kita pasti pernah melihat postingan orang terutama menceritakan tentang suatu sejarah atau tutorial yang panjang dengan sangat sistematis karena ada daftar isi yang ada di awal paragraf.

Nama lain dari daftar isi yang kami maksud adalah Table Of Content. Bentuknya seperti list mini yang mana kita bisa lari ke paragraf bawah sesuai dengan kehendak kita.

Kita paling sering melihat Table of Content di situs wikipedia dimana kita bisa klik judul paragraf disetiap artikel. Selain sangat menarik perhatian para pengunjung, TOC juga dapat memudahkan pengunjung untuk bolak balik tanpa scroll mouse. Enak banget

Cara membuat TOC sebetulnya sangat mudah, hanya saja untuk orang yang baru pertama kali membuat harus sedikit konsentrasi karena cara ini tidak bisa instan. Cara bikinnya harus manual satu persatu. Tetapi Tenang saja, kami akan siap membantu kalian untuk memasang sampai jadi.

Oke yuk langsung saja kita praktekan cara membuat Table of Contentnya:

(Pastikan tidak ada step yang tertinggal ya kawan, satu step tertinggal then you are done here)

1. Masuk ke Blogger.com.

2. Klik Tema > Edit HTML.

3. Cari kode ]]></b:skin> atau </style>.

atau .

4. Copy kode css dibawah ini, lalu Paste di atas kode ]]></b:skin> atau </style>. 

/* Table of Contents (TOC) www.endosadewa.com */
#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}

5. Lalu klik SIMPAN.

Catatan:

Perhatikan kode css dibawah ini:

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

- Jika Anda menggunakan menu navigasi sticky, silahkan atur bagian height:40px;margin-top:-40px.

- Jika Anda tidak menggunakan menu navigasi sticky, silahkan hapus kode tersebut.

6. Lalu buat postingan baru atau Edit post yang ingin ditambahkan TOC.

7. Edit dan pilih mode HTML bukan Compose.

8. Copy kode dibawah ini, lalu Paste setelah paragraf pertama atau bisa Anda sesuaikan sendiri.

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

<li><a href="#toc_5" title="Subheading 5">Subheading 5</a></li>
</ol>
</div>
</div>

9. Lalu tambahkan id="toc_1" pada heading tag. Contohnya:

<h2 id="toc_1">Judul Satu</h2>



...isi paragraf satu



<h2 id="toc_2">Judul Dua</h2>

...isi paragraf dua



<h2 id="toc_3">Judul Tiga</h2>

...isi paragraf tiga



<h2 id="toc_4">Judul Empat</h2>

...isi paragraf empat



<h2 id="toc_5">Judul Lima</h2>

...isi paragraf lima



<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>

...isi paragraf lima part 1



<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>

...isi paragraf lima part 2



<h2 id="toc_6">Judul Enam</h2>

...isi paragraf enam

Dan seterusnya, sesuaikan dengan kebutuhan Anda

Catatan:

- Berlaku untuk heading tag h1, h2, h3, h4, h5, h6 sesuaikan dengan heading tag yang digunakan pada postingan blog Anda.

- Gunakan id="toc_1" kemudian id="toc_2" kemudian id="toc_3" dan seterusnya, sesuaikan dengan jumlah subheading atau minor heading yang ada pada postingan blog Anda.

Setelah Anda Berhasil memasang, pengunjung dengan mudah akan menuju ke judul yang kita inginkan. Nah sekaran tambahkan tombol kembali ke daftar isi agar pengunjung bisa bolak balik ke daftar isi dan paragraf dengan mudah. Caranya:

10. Copy kode dibawah ini, lalu Paste pada bagian terakhir masing-masing paragraf.

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

11. Lalu klik Publikasikan atau Perbarui artikel blog Anda.

Catatan:

Jika Anda selesai mengatur/memasang TOC pada postingan blog, Kamu harus tetap di MODE HTML Jangan sampai pindah ke Compose karena akan berantakan jadinya (dan memang marai mumet)

Jika setelah mengatur/memasang TOC kemudian Anda mempublikasikan atau memperbarui artikel Anda pada bagian Compose, maka link Subheading pada TOC yang saya contohkan diatas akan berubah menjadi link editor postingan tersebut

Oleh karena itu Anda harus tetap berada pada bagian HTML ketika akan mempublikasikan atau memperbarui artikel Anda.

Atau sebelum kode #toc_1 tambahkan URL postingan Anda yang bisa dilihat pada bagian Tautan permanen pada saat Anda menulis artikel (teks editor).

Jadi contohnya: https://www.endosadewa.com/2018/10/sholawat-agar-mimpi-bertemu-rasulullah.html#toc_1 dan seterusnya


Langkah Terakhir, SMOOTH SCROLLING

Agar pergerakan layar menjadi smooth AF, maka tambahkanlah script ini tepat diatas kode / sebelum kode </body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();

// Store hash
var hash = this.hash;

// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){

// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>

Gimana gampang kan? Memang pada awalnya membuat daftar isi di tengah-tengah artikel sangat sulit, tetapi jika kamu teliti dan sabar maka kamu akan menuai hasilnya.