Bayhaqy Blog

Home
Blogger

Bagaimana cara menambahkan Daftar Isi secara otomatis dalam Postingan pada Blogspot

Daftar isi atau dalam bahasa inggris disebut Table of Content (TOC) adalah daftar topik dan subtopik yang tercakup dalam postingan blog dengan judul dan
Hallo Sobat semua,

Pada kesempatan kali ini, kita akan membahas tentang Bagaimana cara menambahkan Daftar Isi secara otomatis dalam Postingan pada Blogspot. Seperti kalian ketahui, blogger tidak memiliki support plugin seperti Wordpress. Sehingga kita diharuskan memiliki pengetahuan lebih untuk membuat tampilan dari blog kita agar lebih menarik.

Selain bisa membuat postingan kita lebih tersusun, Daftar isi juga bisa berfungsi untuk meningkatkan rangking blog kita pada search engine seperti google dan lainnya dari penulisan konten dan SEO. Jadi, Apa itu Daftar isi?
Bagaimana cara menambahkan Daftar Isi secara otomatis dalam Postingan pada Blogspot


    Penjelasan tentang Daftar Isi

    Daftar isi atau dalam bahasa inggris disebut Table of Content (TOC) adalah daftar topik dan subtopik yang tercakup dalam postingan blog dengan judul dan tautan topik pada halaman yang sama, biasanya ditemukan di awal blog atau sebelum heading pertama dan judul blog serta artikel. Jika kita mengklik tautan apa pun dari daftar isi, itu akan mengirim / melompat ke bagian atau topik tertentu.

    Daftar Isi meningkatkan SEO

    Daftar isi sendiri merupakan cara yang bagus untuk menampilkan semua topik yang dibahas di blog, juga dapat membantu Google untuk memahami blog kita dan menunjukkan hasil kita dalam Google’s Featured Snippet Results. Seperti yang kita ketahui, Google menyukai posting blog dan halaman web yang sangat rinci dan terstruktur dengan baik. Dan dengan menambahkan toc di posting blog kita, dapat membuat posting blog kita lebih terstruktur.
    Menurut sebuah penelitian oleh NN Group, lebih dari 79% dari total pembaca web adalah pengunjung yang hanya membaca poin-poin penting dari suatu halaman web dan menambahkan TOC akan memungkinkan pembaca untuk melompat ke bagian penting dari posting blog. Sekarang, mari kita bahas cara untuk dapat secara otomatis menambahkan daftar isi di postingan blogger.

    Cara Membuat Daftar Isi secara otomatis pada Blogger

    Terdapat beberapa tahapan dalam membuat daftar isi, diantaranya:
    1. Tambahkan kode xml ke tema blogger 
    2. Tambahkan style css ke tema blogger
    3. Edit tema blogger 
    4. Lalu, Aktifkan daftar isi di postingan blogger 
    5. Terakhir, tempatkan kode js tambahan daftar isi otomatis di postingan blogger
    Tahap 1:
    Hal pertama yang perlu kita lakukan yaitu masuk ke Dashboard Blogger -> kemudian pergi ke Theme -> dan kemudian klik tombol Edit Html.
    Cari untuk kode </head>, lalu tambahkan diatas kode tersebut dengan kode dibawah ini:
    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin by blog.bayhaqy.com           
function bayTOC() {var bayTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);bayTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("bayTOC").innerHTML += bayTOC;}}function mbtToggle() {var mbt = document.getElementById('bayTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>          
</script>
    Tahap 2:
    Pada tahap kedua, kita akan menambahkan syle css. Cari untuk kode  ]]></b:skin>, lalu tambahkan diatas kode tersebut dengan kode dibawah ini:
    .bayTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald, arial;display: block; width: 70%;}
.bayTOC ol,.bayTOC ul {margin:0;padding:0;}
.bayTOC ul {list-style:none;}
.bayTOC ol li,.bayTOC ul li {padding:15px 0 0;margin:0 0 0 30px;font-size:15px;}
.bayTOC a{color:#0080ff;text-decoration:none;}
.bayTOC a:hover{text-decoration:underline;}
.bayTOC button{background:#FFFFE0;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px;}
.bayTOC button:after{content: "\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px;}
    Tahap 3:
    Disini kalian harus menambahkan kode yang sudah ada sebelumnya. Cari untuk kode <data:post.body/> , lalu ganti dengan kode dibawah ini:
    <div id="post-toc"><data:post.body/></div>
    Tahap 4:
    Sekarang, kita buat post untuk melakukan pengujian. Buka Dashboard -> lalu pilih New Posts. Tulis blog dengan menambahkan susunan heading. Jika telah menulis, tambahkan kode dibawah pada menu HTML. Penambahan kode tersebut disarankan setelah paragraf pertama dari postingan blog kalian.
    <div class="bayTOC"> 
    <button onclick="mbtToggle()">Contents</button> 
    <ol id="bayTOC"></ol> 
</div>
    Tahap 5:
    Ditahapan terakhir, tambahkan kode JS dibawah ini pada post paling bawah dimana kalian ingin tampilkan daftar isi.
    <script>bayTOC();</script>
    Setelah tahapan selesai, silahkan lihat hasilnya untuk penambahan daftar isi secara otomatis. Dibawah ini merupakan contoh untuk daftar isi otomatisnya:


    Sekian untuk pembahasan kali ini, Semoga hal tersebut bisa bermanfaat bagi kalian semua. Silahkan share jika pembahasan ini menurut kalian semua bermanfaat. Jangan lupa untuk follow dan comment juga ya. Terima Kasih. 😁