Cara Membuat Daftar Isi Pada Postingan Blog

Daftar isi atau table of content (TOC) biasanya digunakan untuk menjelaskan rincian pembahasan dalam isi artikel.

Tujuan utama dari pemasangan table of content dalam sebuah artikel adalah untuk memudahkan pembaca memilih point-point tertentu dalam pembahasan.

Dalam sebuah karya tulis, seperti skripsi, makalah, buku dan sebagainya kita akan menemukan Daftar Isi namun berbeda dengan daftar isi yang ada dalam blog dalam artian daftar isi yang ada dalam blog menggunakan semacam link.

Nah bagi sobat yang ingin mencoba memasang Daftar isi dalam postingan berikut langkah-langkahnya

Cara Membuat Table of Content (TOC) [Daftar Isi] Pada Postingan Blog

1. Masuk ke blogger Pada bagian Dasboard Klik Tema > klik tombol HTML, Tambahkan kode CSS berikut ini sebelum  </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; agar lebih mudah sobat bisa tekan tombol CTRL + F pada kyboard.

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

2. Kemudian tambahkan kode berikut 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>

3. Kemudian simpan tema. Untuk bagian ini sudah selesai.

Setelah di simpan silahkan menuju postingan. Sobat bisa edit postingan yang ingin ditambah dengan Daftar isi atau mungkin ingin mencoba terlebih dahulu dengan membuat postingan baru.

Selanjutnya copy paste kode berikut ini dibagian HTML bukan Compose

<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 Subheading1 </a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading2 </a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading3 </a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading4 </a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading5 </a></li>
</ol>
</div>
</div>

Edit bagian kode yang sudah admin tandai dengan tulisan sobat, kemudian tambahkan ID id="toc_1" pada setiap bagian heading. Seperti di bawah ini

<h4>
Cara Membuat Daftar Isi Pada Postingan Blog</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.

Setelah ditambahkan ID maka hasilnya akan menjadi seperti ini

<h4 id="toc_1">
Cara Membuat Daftar Isi Pada Postingan Blog</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.

Kemudian tambahkan kode berikut ini di setiap akhir paragraf

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

Maka Hasilnya akan menjadi seperti di bawah ini. Perhatikan kode yang ditandai. Sesuaikan dengan urutan pada Daftar isi yang akan sobat buat.

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

Setelah itu klik Publikasikan dan lihat hasilnya. Selesai.

CATATAN

Sobat harus mempublikasikan dalam mode HTML bukan Compose. Mengapa harus di mode HTML? Sebab jika mempublikasikan pada mode kompose link toc-nya tidak akan berfungsi dan akan berubah. kurang lebih menjadi demikian.

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

Sumber kode Admin dapatkan dari website Arlina Desaign

Hampir lupa, jika sobat ingin melihat hasil dari Cara Membuat Table of Content / Daftar Isi Pada Postingan Blog silahkan klik link berikut DEMO

Nah, sobat demikian artikel tentang Cara Membuat Daftar Isi Pada Postingan Blog. semoga bermanfaat.

Share this post