Cara Membuat Table Of Contents Di Postingan (Menu Daftar Isi) Blogger

Iyonxx - Menu Daftar Isi Atau yang biasa disebuat dengan Table Of Contents (TOS) adalah daftar yang terdiri dari poin atau bagian dari subjek yang terkandung dalam sebuah artikel.

Cara Membuat Table Of Contents (Menu Daftar Isi) Di Postingan Blogger

Kita dapat menggunakan Daftar Isi sebagai uraian dari isi artikel dalam bentuk tautan sehingga akan lebih mudah bagi pembaca untuk memilih informasi apa yang akan dibaca pokok bahasannya. Kita sering menemukan Daftar Isi di situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Books yang biasanya diletakkan setelah pengenalan artikel atau ide utama sebuah artikel.

Secara umum, Daftar Isi (TOC) digunakan dalam aplikasi Microsoft Word, yang berfungsi untuk mengetahui konten dokumen atau file. Namun kali ini bagaimana jika kita menggunakan TOC ini pada blogger untuk membuat daftar isi pada halaman posting blogger, mungkin ini akan terlihat lebih menarik.

Selain itu, desain yang digunakan dalam TOC hampir mirip dengan Wikipedia, sehingga akan menarik perhatian pembaca blog Anda. Di sini kami tidak menggunakan kode skrip untuk mendeteksi tajuk teks atau tag tajuk yang disimpan dalam mengedit posting blog HTML, karena kami menganggap bahwa penggunaan Daftar Isi tidak digunakan untuk semua halaman, oleh karena itu penggunaan TOC ini harus dilakukan secara manual di pos Anda ingin menggunakan TOC ini.

Membuat daftar isi di blogger ini hanya menggunakan kode skrip HTML, ditambahkan dengan CSS untuk menyesuaikan tata letak dan desain tampilan, dan kode JavaScript untuk daftar beralih TOC untuk lompat tautan ke TOC.

Dibawah Ini Adalah Cara Membuat Table of Contents di Postingan Blogger
Untuk membuatnya silakan ikuti langkah-langkah berikut ini.

• Buka Blogger >>
• Klik menu Tema >>
• Klik tombol Edit HTML >> 
• Kemudian tambahkan kode CSS ini sebelum 
• </head> 
• Atau 
• &lt;/head&gt;&lt;!--<head/>--&gt;

 <style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

• selanjutnya >>
• Tambahkan kode di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type="text/javascript">          
//<![CDATA[          
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>          
</script>

• Simpan Tema >>
• Setelah itu masuk ke bagian Postingan > lalu Edit salah satu postingan blog Anda yang ingin menggunakan Tabel Of Contents (TOC)
• Pastikan Anda berada pada bagian HTML bukan Compose.
• Copy kode dibawah ini, lalu Paste setelah paragraf pertama atau bisa Anda sesuaikan sendiri.

<div id="light-toc">
<div id="toc_list" 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">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>
<li><a href="#toc_6" title="Subheading 1">Bagian Subheading 6</a></li>
<li><a href="#toc_7" title="Subheading 2">Bagian Subheading 7</a></li>
<li><a href="#toc_8" title="Subheading 3">Bagian Subheading 8</a></li>
<li><a href="#toc_9" title="Subheading 4">Bagian Subheading 9</a></li>
<li><a href="#toc_10" title="Subheading 5">Bagian Subheading 10</a></li>
</ol>
</div>
</div>

• Edit tulisan yang ditandai dengan tulisan sendiri >> Kemudian tambahkan id="toc_1" di setiap heading sesuai dengan ID pada kode di atas. 
• contohnya seperti ini >>

<h4>
Cara Membuat Table of Contents (TOC) 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 tajuk berikutnya, sesuaikan urutan ID pada Table of Contents yang Anda buat. 
• Contoh >>

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

<h4 id="toc_6">
Heading Bagian 6</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_7">
Heading Bagian 7</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_8">
Heading Bagian 8</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_9">
Heading Bagian 9</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_10">
Heading Bagian 10</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.

• Selanjutnya >>
• 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 Lengkapnya Menjadi Seperti Dibawah Ini 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 Terbitkan posting dan lihat hasilnya di blog Anda.

Itulah tentang cara membuat Tabel Of Contents (TOC) di posting blogger, jika Anda memiliki saran atau pertanyaan, silakan hubungi kami melalui halaman kontak atau dengan berkomentar di bawah ini.

Share this post