Download aplikasi Kami RootSec Follow Github
Jasa Pembuatan Whatsapp Bot Click Disini

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

Getting Info...

About the Author

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…

Post a Comment

Ngapain?
DoodStream - Upload videos share & make money
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.