Cara Membuat Daftar Isi (Table of Contents) Di Dalam Postingan Artikel

Hai, Sahabat. .
Di hari yang baik ini, saya ingin membagikan tutorial atau cara membuat daftar isi (table of content) di dalam postingan artikel kita.


Lihat juga:

• Cara Memasang 2 Iklan Google Adsense Di Tengah Artikel (Postingan)
• Cara Memasang Iklan Google Adsense Otomatis Di Blog Atau Website Kamu
• Cara Membuat Atau Memasang Fan Page Facebook Keren Di Situs Web Kamu

Apa Itu Daftar Isi (Table of Content) Di Halaman Postingan dan Apa Manfaatnya?

Daftar isi (Table Of Content) di halaman postingan adalah sebuah daftar isi yang berisi beberapa list dari daftar konten yang ada di dalam halaman postingan tersebut, dan biasanya berada di awal postingan.

Jika diibaratkan dengan sebuah buku, biasanya ada halaman daftar isi yang berisi daftar halaman untuk setiap bab dari buku tersebut. Dengan itu maka kita dapat dengan mudah mencari halaman dari bab yang ingin kita baca.

Dengan Daftar Isi (Table Of Contents atau TOC) kita bisa melompat ke bagian tertentu dari konten yang ingin kita baca. TOC Biasanya akan ditandai dengan sebuah header dari tiap-tiap kontennya dan biasanya digunakan untuk postingan yang memiliki konten yang sangat panjang, sehingga pembaca lebih mudah memilah bab-bab dari konten tanpa perlu capek menggulung layar. Selain itu Daftar Isi (Table Of Contents atau TOC) juga akan diindex oleh Google dan akan ditampilkan di halaman pencarian.

Cara Membuat Daftar Isi (Table of Content) Untuk Halaman Postingan

Sekarang, saya akan menjelaskan langkah-langkah membuat Daftar Isi (Table of Contents) di halaman postingan kamu.

Masukkan Kode CSS Ke Blog atau Situs Kamu

Untuk memasukkan kode CSS ke blog kamu, ikuti langkah-langkah di bawah ini:

1. Masuk ke "Akun Blogger" kamu
2. Klik menu "Tema". Kemudian klik "Edit HTML"
3. Cari kode </head>. Kemudian tempatkan kode di bawah ini sebelum (di atas) kode </head>.


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


4. Kemudian kamu cari kode </body>. Tempatkan kode di bawah ini tepat Sebelum (Di atas) kode </body>


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


5. Klik tombol "Simpan Tema"

Buat Postingan (Artikel) Baru dan Buat Daftar Isinya

Setelah memasukkan Kode CSS ke HTML situs web kamu. Sekarang kamu hanya perlu membuat postingan baru kemudian membuat penyesuaian untuk Daftar Isi (Table of Contents). Ikuti langkah-langkah di bawah ini:

1. Buat postingan baru
2. Setelah selesai membuat postingan baru, kamu jangan dulu mempublikasikannya. Ubah Mode "Compose" menjadi "HTML"
3. Masukkan "Kode" di bawah ini di tempat yang kamu Inginkan. Biasanya: Di Awal Artikel, Setelah Paragraf Pertama, atau Sesuai Keinginan Kamu


<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>
</ol>
</div>
</div>


4. Tambahkan "Kode ID" untuk setiap "Pokok Bahasan (heading)" yang ingin kamu tandai. Contoh "Kode ID", antara lain: id="toc_1", id="toc_2", id="toc_3", dan seterusnya.
5. Tempelkan "Kode ID" pada setiap Heading sesuai Urutan dan Jumlah TOC yang ingin kamu buat
6. Perhatikan contoh di bawah ini dengan baik-baik


<h2 id="toc_1">
Defini Marketing Mix</h2>


Marketing mix adalah .............


<h2 id="toc_2">
Elemen Marketing Mix</h2>


Di bawah ini adalah elemen-elemen dari marketing mix ................


<h2 id="toc_3">
Manfaat Marketing Mix</h2>


Di bawah ini adalah keuntungan menggunakan marketing mix .............


<h3 id="toc_4">
Sejarah Marketing Mix</h3>


Marketing mix dipopulerkan oleh ...............


<h3 id="toc_5">
Perbedaan Bauran Pemasaran 4P dan 7P</h3>


Perbedaan 4P dan 7P di antaranya ..................


7. Tempelkan "Kode" di bawah ini Di Akhir Paragraf dari Setiap Heading yang ditempelkan Kode ID


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


8. Lihat Contoh di bawah ini dengan baik-baik


<h2 id="toc_1">
Definisi Marketing Mix</h2>


Marketing mix adalah .................


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


9. Klik "Publikasikan"
10. SELAMAT. . Kamu telah menyelesaikan semua langkah-langkahnya

Untuk "Menguji Coba" apakah Daftar Isi (Table of Contents) telah di buat. Silahkan kamu Kunjungi "Halaman Postingan" kamu.



Semoga Bermanfaat. .

Share this post