Cara Membuat TOC di Postingan Blog

Cara Membuat Daftar Isi ( TOC )  di Postingan Blog

Table of Contents adalah Daftar isi pada postingan blog yang menunjukkan pokok-pokok pembahasan di postingan tersebut. Daftar isi Konten dapat di gunakan oleh pengguna untuk loncat ke pokok pembahasan.

Seperti dalam postingan blog ini, kami akan membuat Table of Contents sebagai contoh. Lalu, bagaimana Cara Membuat Table of Contents di Postingan Blog ?

Cara Memasang Table of Contents di Postingan Blog

Daftar isi

1. Menambahkan CSS
2. Menambahkan Javascript
3. Cara Penggunaan

Seperti Daftar isi di atas, demikian lah contoh TOC yang akan tampil di dalam postingan blog anda.

Berikut ini adalah langkah-langkah yang harus anda ikuti :

Menambahkan Kode CSS pada Template

1. Login ke Blogger

2. Klik Tema atau Template

3. Klik Edit HTML ( untuk Blogger versi lama )

    Untuk Blogger versi Baru, klik tombol , kemudian klik Edit HTML ( Lihat Gambar )

Ilustrasi Blogger versi Terbaru

4. Salin dan Tempel kode CSS berikut tepat di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* CSS Table of Contents by arlinadzgn.com*/
#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>

Menambahkan Kode JS pada Template

5. Kemudian, Salin dan Tempel kode Javascript berikut tepat di atas kode </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>

6. Simpan Tema atau Template.

Cara Penggunaan pada Postingan

Pada bagian pengeditan Postingan, anda harus dalam mode pengeditan HTML, bukan mode COMPOSE.
Dan pastikan, selama proses pengeditan anda harus berada di dalam mode HTML. Jika anda beralih ke mode COMPOSE, link pada Table of Contents akan berubah.

Contohnya,

Ini adalah link TOC pada mode pengeditan HTML.

<li><a href="#toc_1" title="Subheading 1">Bagian Subheading 1</a></li>

Jika anda beralih ke mode pengeditan COMPOSE, link akan berubah menjadi seperti berikut.

<li><a href="https://www.blogger.com/blogger.g?blogID=954567927067253809#toc_1" title="Subheading 1">Bagian Subheading 1</a></li>

Dalam hal ini, kami sarankan anda menggunakan Table of Contents dengan hati-hati, karena akan berdampak pada hasil penelusuran. Sebaiknya gunakan metode ini dalam tahap Akhir pengeditan. Pastikan terlebih dahulu isi postingan anda di dalam mode COMPOSE.

Untuk penggunaan di dalam Postingan, anda dapat menggunakan Kode seperti di Bawah ini.

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

Keterangan :
1. Tulisan berwarna oranye #toc_1 untuk memanggil Bagian Subheading atau pokok pembahasan.
2. Tulisan berwarna merah #toc_1 adalah nama Subheading yang akan di panggil, contohnya Bagian Subheading 1 dapat anda ubah menjadi Pokok Pembahasan I.

Kemudian, agar Subheading dapat di panggil menggunakan kode #toc_1, anda dapat menambahkan id="toc_1" di dalam tag heading yang anda buat.

Sebagai contoh, berikut ini adalah kurang lebih contoh kode pemasangan Table of Contents yang Tepat untuk Blogger.

<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="Pokok Pembahasan I">Pokok Pembahasan I</a></li>
<li><a href="#toc_2" title="Pokok Pembahasan II">Pokok Pembahasan II</a></li>
<li><a href="#toc_3" title="Pokok Pembahasan III">Pokok Pembahasan III</a></li>
<li><a href="#toc_4" title="Pokok Pembahasan IV">Pokok Pembahasan IV</a></li>
<li><a href="#toc_5" title="Pokok Pembahasan V">Pokok Pembahasan V</a></li>
</ol>
</div>
</div>


<h2 id="toc_1">
Pokok Pembahasan I</h2>
<div>
.....
.....
.....
</div>

<h2 id="toc_2">
Pokok Pembahasan II</h2>
<div>
.....
.....
.....
</div>

<h2 id="toc_3">
Pokok Pembahasan III</h2>
<div>
.....
.....
.....
</div>

<h2 id="toc_4">
Pokok Pembahasan IV</h2>
<div>
.....
.....
.....
</div>

<h2 id="toc_5">
Pokok Pembahasan V</h2>
<div>
.....
.....
.....
</div>

Selesai.


Sumber atau Referensi :

1. Cara Membuat Table of Contents di Postingan Blogger