Cara Membuat Daftar Isi di Postingan Blog
Untuk merapikan tulisan, apalagi jika tulisan tersebut terlalu panjang, ada baiknya kamu menambahkan sebuah daftar isi pada halaman artikel dengan tulisan panjang tersebut.
Hal tersebut tentu agar memudahkan para pembaca untuk mengakses bagian tertentu dari sebuah konten yang kamu tulis. Nah lalu bagaimana sih cara menambahkan daftar isi pada halaman artikel yang kamu buat? berikut saya rangkum langkah singkatnya.
Cara Membuat Daftar Isi di Postingan Blog
Kadang kamu sebagai seorang penulis di blog sering menulis banyak sekali Heading kebawah, bisa sampai 7 - 10 heading, dan tentunya bagi sebagian pembaca akan sedikit kesulitan untuk melihat heading mana yang belum pernah dibaca sebelumnya.
Persiapan
Persiapannya hanya satu saja menurut saya, kamu harus teliti dan sabar dalam memasukkan beberapa langkah dibawah, karena satu kesalahan saja dapat membuat tampilannya menjadi berantakan dan bahkan fungsi daftar isi tidak bisa diterapkan.
Memasukkan CSS dan Script Daftar isi kedalam Template
Hal pertama yang perlu kamu lakukan adalah dengan memasukkan kode yang saya sediakan dibawah dan masukkan diantara kode <head> dan </head>. Silahkan kamu masuk ke Halaman Dasbor Blog > Tema > klik pada Edit HTML.
Selanjutnya baik menggunakan manual via Edit HTML atau melalui Menu Custom CSS jika kamu menggunakan VioMagz 4.1.0 atau yang lebih baru, kamu harus paste kode berikut.
<pre><code class="hljs shell"><style type='text/css'>
/* CSS Daftar Isi */
<span class="hljs-meta">#</span><span class="bash">light-toc{background:<span class="hljs-comment">#f5f5f5;border-radius:3px;padding:10px 20px}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc_list{font-weight:700;cursor:pointer;margin:10px 0}</span>
<span class="hljs-meta">#</span><span class="bash">toc_list:focus,<span class="hljs-comment">#toc li:focus,.back_tocontent:focus{outline:none}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc_list svg{vertical-align:middle}</span>
<span class="hljs-meta">#</span><span class="bash">toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}</span>
<span class="hljs-meta">#</span><span class="bash">toc ol li:before{left:-2em}</span>
<span class="hljs-meta">#</span><span class="bash">toc li a{color:<span class="hljs-comment">#222}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc li a:hover{color:<span class="hljs-comment">#1e90ff}</span></span>
<span class="hljs-meta">#</span><span class="bash">toc{display:grid}</span>
.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></code></pre>Setelah selesai, silahkan kamu masukkan bagian kode script berikut diantara <body> dan </body> pada menu Edit HTML.
<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>Jika kamu adalah pengguna VioMagz 4.1.0 atau yang lebih baru, kamu bisa memasukkan kode script diatas pada halaman Menu Tata Letak > Custom Javascript Footer.
Memasukkan Kode didalam Postingan
Jika langkah sudah selesai, silahkan kamu masuk pada artikel yang akan kamu tambahkan Daftar isi didalamnya.
Langkah 1. Silahkan kamu masuk pada menu editor dan masuk ke tampilan HTML.
Langkah 2. Selanjutnya silahkan kamu masukkan kode berikut untuk bagian daftar isinya.
<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>Kode diatas tersebut akan menjadi bagaimana tampilan daftar isi ditampilkan, contoh adalah seperti yang dapat kamu lihat pada bagian awal artikel ini.
Pada kode diatas, silahkan kamu sesuaikan dengan Heading kamu nanti seperti nama Sub Heading, kamu sesuaikan (misalkan "Persiapan" yang saya tunjukkan pada gambar diatas. Selain itu agar ketika kamu klik langsung berpindah pada heading yang dituju, silahkan kamu masukkan dan ubah variabel <H3> menjadi <H3 id="toc_1">, H3 adalah heading berapa (dimana H3 di Blogger adalah Sub Judul), selanjutnya id="toc_1" adalah id dari id daftar isi tersebut, contoh id="toc_3" adalah urutan daftar isi ketiga.
Untuk H3 bisa kamu sesuaikan, baik itu H1, H2 atau sesuai keinginan kamu, selama id=toc_x kamu masukkan, akses akan sama saja. Jadi pastikan kamu teliti dalam mengubah variable tersebut.
Jika kamu sudah melakukan semua langkah yang saya jelaskan diatas, kamu kini bisa melihat hasilnya, dan jika kamu ingin memasukkan kembali daftar isi pada artikel kedua, ketiga dan seterusnya, kamu cukup melakukan langkah ketiga saja, sedangkan langkah Memasukkan CSS dan Javascript sudah tidak perlu dilakukan lagi.
Nah silahkan kamu coba, saya harap kamu berhasil. Sekian artikel kali ini, saya cukup kesal juga ketika membuatnya karena memang harus menambahkan beberapa bagian kode termasuk syntax highlight, dan kode daftar isi ini.
*Artikel ini diperbarui pada 29 Oktober 2020 untuk menyesuaikan dengan tampilan dan perubahan Blogger yang baru.
Post a Comment for "Cara Membuat Daftar Isi di Postingan Blog"