Membuat Fitur Table Of Contents Keren di Halaman Postingan Blogger

Table of contents merupakan sitemap atau daftar isi yang tampil di setiap halaman postingan blogger secara custom yang fungsinya untuk mempermudah pembaca menjelajahi isi 1 (satu) halaman postingan blog.

Fitur ini sangat membantu pengunjung blog mengetahui sub pokok bahasan yang Anda tulis dengan cepat dan terarah. Table of contents ini biasanya digunakan pada website atau blog yang berisi konten-konten atau artikel-artikel dalam bentuk daftar (list) dengan ulasan yang panjang (long post), misalnya : 5 Fenomen Alam Paling Ekstrim, 7 Tragedi Kecelakaan Pesawat Paling Tragis, dan lain sebagainya.

Selain membuat postingan blog Anda lebih ramah pengguna (user friendly). Tabel Of Content ini dapat memikat pembaca lebih banyak karena tersedia aksesibilitas dan navigasi halaman postingan yang lebih baik. Keuntungan lainnya adalah menjadikan blog terlihat lebih profesional.

Masih bingung? Lihat demonya pada tombol berikut :

Jika tertarik ingin membuatnya pada blog Anda, ikuti langkah-langkahnya sebagai berikut :

Buka blogger > menu tema/template > edit HTML, kemudian tambahkan kode css berikut ini tepat diatas 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>

Tempatkan code script berikut ini tepat diatas 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>

Simpan Template

Langkah memasukkan kode scirpt dan css sudah selesai. Selanjutnya adalah cara memanggil script tersebut agar table of content tampil di dalam halaman setiap postingan. Ikuti langkah-langkahnya sebagai berikut :

Buat postingan baru dan masuk pada mode HTML bukan compose. Kemudian copas kode berikut ini dan pastekan ke dalam postingan bentuk mode HTML tadi.

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

Ubah title dan bagian subheading1,2,3 dan seterusnya dengan sup point sesuai dengan isi postingan. Dan pada setiap judul sub heading tambahkan kode "id=toc_1, id=toc_2, dan seterusnya" sesuai dengan jumlah sub postingan.

Pada setiap paragraf akhir sub heading tempelkan kode sebagai berikut:

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

Untuk lebih memudahkan pemahaman dalam menerapkan fitur Table of Content ini, berikut contoh penggunaan scriptnya pada setiap halaman postingan blog.

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

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

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

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

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

Demikianlah Cara mudah Membuat Table Of Contents di Postingan Blogger. Semoga bermanfaat.