Cara Membuat Table of Contents atau Daftar Isi di Postingan Blog. Apa itu Table of Contents? Table of Contents adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel.
Table of Contents atau seperti daftar isi ini bisa kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk memilih informasi bagian pokok bahasan apa saja yang akan dibacanya.
Table of Contents ini sering kita temui pada situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Book yang biasanya diletakkan setelah tulisan kata pengantar atau ide pokok dari sebuah artikel.
Nah, dipostingan kali ini saya akan membagikan cara membuat table of contents di postingan blogger. Simak tutorialnya dibawah.
Cara Membuat Table of Contents di Postingan Blogger
Pertama, buka Blogger >> Tema >> Edit HTML >> Kemudian tambahkan kode CSS ini sebelum </head>
Edit tulisan yang ditandai dengan tulisan sendiri. Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada kode di atas. Misalnya seperti ini
<h4>
Cara Membuat Table of Contents di Postingan Blogger</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Tambahkan ID pada heading menjadi seperti ini.
<h4 id="toc_1">
Cara Membuat Table of Contents di Postingan Blogger</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Perhatikan kode yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang anda buat. Contohnya
<h4 id="toc_1">
Heading Bagian 1</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_2">
Heading Bagian 2</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_3">
Heading Bagian 3</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_4">
Heading Bagian 4</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<h4 id="toc_5">
Heading Bagian 5</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Kemudian tambahkan kode ini di setiap akhir paragraf tiap bagian
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>
Maka hasilnya menjadi seperti ini.
<h4 id="toc_1">
Heading Bagian 1</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>
Setelah selesai, silakan klik tombol Publikasikan dan lihat hasilnya di blog anda....
Demikian Cara Membuat Table of Contents (TOC) di Postingan Blog. Semoga bisa bermanfaat dan sampai jumpa dispotingan selanjutnya...