Cara Membuat Table of content di Postingan blogger

Cara Membuat Table of content di Postingan blogger atau daftar isi di blogger yang ada di postingan blogger agar menjadi tertata lebih rapi lagi dan singkat untuk membuat artikel atau conten yang penting agar cepat tertuju.

membantu pengunjung untuk menuju ke titik membaca keseluruhan posting yang dapat menghemat waktu pengunjung Anda serta artikel Anda terlihat profesional. Lalu bagaimana Cara Membuat Table of content di Postingan blogger.

Membuat Table of content di Postingan blogger fitur yang baru di luncurkan oleh blogger, dan waktu mengunakan anda bisa ikuti semua tutorial dari saya yang di bawah ini.

Cara Membuat Table of content di Postingan blogger

Untuk membuatnya daftar isi anda perlu mengikuti langkah saya Mboton Dev Cara Membuat Table of content di Postingan blogger, Caranya cukup mudah untuk anda pelajari.

1. Membuat Table of content di Postingan blogger.
2. Bermanfaat bagi pengunjung Anda.
3. Penampilan profesional.
4. Membantu Pengunjung keinti yang terpenting.
5. Terlihat seo untuk website anda.
6. Mempersingkat Waktu begitu Cepat.

Cara Membuat Table of content di Postingan blogger

Membuat Table of content di Postingan blogger, Anda cukup memperlu membuat h2 atau h3 atau h4 sebagai didalam isi konten Anda dan secara default.

desainnya anda bisa merubah warna yang anda inginkan kalau bisa anda menyesuaikan yang sesuai warna template atau tema agar terlihat serasi menarik.

Tetapi saya memodifikasi sesuai pilihan saya sendiri yang sesuai template saya. Anda bisa menjadikan diri Anda sendiri untuk mencocokan tema warna.

Cara otomatis Membuat Table of content di Postingan blogger

Untuk metode yang manual, Anda dapat membuat Table of content secara manual berarti Anda dapat memasukkan apa saja ke dalam daftar isi Anda serta Anda dapat memasukkan subtopik juga h2 h3 atau h4.

Masukan Code CSS Table Of Content Blogger

Dengan cara anda harus membuat html dan cssnya dengan sama code saya dibawah ini. caranya anda harus siapkan akun blog yang sudah siap.

1. Masuk Akun Google Gmail.
2. Cari Blogger,com.
3. Masukan ID Akun Blogger anda.
4. Pilih Tema/Template.
5. Masuk code CSSnya sebelum </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>

Jika anda sudah membuatnya sekarang anda harus mempastekan code Java Script yang di bawah ini yaitu sebelum </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>

Anda Bisa menyimpan Tema/Template anda.

Sekarang anda bisa postingan baru atau postingan lama anda edit untuk mencobanya terlebih dahulu.

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

Anda bisa mengedit tulisan yang bercode di bawah ini.

<h4>Cara Membuat Table of Contents di Postingan Blogger</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.

Tambahkan Subheading seperti di bawah ini codenya.

<h4 id="toc_1">Cara Membuat Table of Contents di Postingan Blogger</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.

Perhatikan semua yang bawah ini semisal seperti ini adalah postingan anda. bisa lihat ini yang di bawah.

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

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

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

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

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

Akhir postingan anda yang baru anda bisa tambahkan code untuk memanggil Java Scriptnya seperti di bawah ini.

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

jika sudah begitu tutorialnya ini sebagai untuk belum memasang Table Of Content di blogger anda semua semoga anda bisa membuatnya.