Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Membuat Table of Contents di Postingan Blogger

 


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

AnonSec Team
AnonSec Team Mungkin ketidaksempurnaan kita yang membuat kita begitu sempurna satu sama lain.Cinta adalah ruang dan waktu yang diukur oleh hati.Cinta terdiri dari satu jiwa yang menghuni dua tubuh.Kamu mungkin memegang tanganku untuk sementara waktu, tetapi kamu memegang hatiku selamanya.

Post a Comment for "Membuat Table of Contents di Postingan Blogger"