Cara Membuat Daftar Isi Artikel Otomatis di Blogspot

Cara Membuat Daftar Isi Artikel Otomatis di Blogspot
www.ansoriweb.com - Bagaimana caranya untuk membuat table of content (TOC) / daftar isi secara otomatis di blogspot atau blogger.com?. Caranya sangat mudah untuk demonya bisa anda lihat diblog ini, mari teman-teman blogger simak tutorial dibawah ini.

Cara Membuat Table Of Content (TOC) Otomatis di Blogspot

Langkah 1: Backup Template Blog

Apa tujuan dari membackup template?. dibuat jaga-jaga jika template yang sudah diedit error.

Langkah 2: Cari kata </head>

Dan copykan kode ini diatas </head>.

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.bwstoc {
 margin: 10px 0;
 background: #F0F0F0;
 border: 1px solid #ddd;
}
.bwstoc ol, .bwstoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
}
.bwstoc ul {
 list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.bwstoc a {
 text-decoration: none;
}
.bwstoc a:hover {
 text-decoration: underline;
}
.bwstoc .bwstocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
 text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>
//<![CDATA[
function bwstoc() {
 var bwstoc = i = headinglength = getheading = 0;
 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
 if (headinglength > 0) {
 // Hanya Tampil Jika Ditemukan Minimal 1 Heading
 for (i = 0; i < headinglength; i++) {
 getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var bws_2 = bws_1.trim();
 var getHeadUri = bws_2.replace(/\s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("bwstoc").innerHTML += bwstoc;
 }
 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
    var bwstocBtn = document.getElementById('bwstoc');
 var bwstocWrapID = document.getElementById('bwstocwrap');
 var bwstocLink = document.getElementById('bwstocLink');
    if (bwstocBtn.style.display === 'none') {
        bwstocBtn.style.display = 'block';
 bwstocWrapID.style.display = 'block';
 bwstocLink.innerHTML = 'Tutup';

    } else {
        bwstocBtn.style.display = 'none';
 bwstocWrapID.style.display = 'inline-block';
 bwstocLink.innerHTML = 'Tampil';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

Baca Juga
Cara Membuat Blog dan 6 Cara Menghasilkan Uang dari Blog

Langkah 3: Cari kode <data:post.body/>

Dan ganti semua kode <data:post.body/> menjadi kode dibawah ini.

<div id='post-toc'>
  <div id='bwstocwrap' class='bwstoc' style='display:inline-block;'>
    <div class='bwstocHeader'>
      Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]
    </div>
      <ul id='bwstoc' style='display:none'/>
  </div>
<data:post.body/>
<script>bwstoc();</script>
</div>


Langkah 4: Simpan Template 

Setelah selesai mengedit template blog tersebut langkah terakhir adalah klik "simpan".

Mengatasi Daftar Isi tidak Muncul

Seperti pengalaman saya sebelumnya, daftar isi artikel sebelumnya diblog ini tidak muncul. Setelah ditelusuri dan diamati teryata blog ini tidak memakai h1, h2, h3 tetapi memakai Normal, Large, Largest.

Manfaat Memasang TOC diblog

Manfaat Memasang TOC diblog

Berikut Tutorial Cara Pemasangan TOC

Jangan lupa like, share, subscribe channel admin ya :)


Jika daftar isi diblog anda tidak muncul pasti dikarenakan masalah tersebut.

Baca JugaContoh Web Sekolah Dengan Tampilan Keren dan Menarik

Penutup

Itulah tadi Cara Membuat Daftar Isi Artikel Otomatis di Blogspot, semoga bermanfaat. Jika ada pertanyaan silahkan berkomentar dibawah ini. Terima Kasih.

Thanks to Bibit.ws atas scriptnya untuk agan-agan yang malas pasang toc manual 🀣.
Next Post Previous Post
31 Comments
  • Syaffi
    Syaffi 26 Juli, 2020 18:47

    Work gan, terimakasih..

    Mau tanya gan, kalo setting biar otomatis TOC terbuka saat kita membuka artikel gmn ya?

    Karena dr code yg agan share tersebut, saat kita membuka artikel TOC default nya tertutup

    Tksh gan

  • Syaffi
    Syaffi 26 Juli, 2020 19:01

    Work gan, terimakasih..

    Mau tanya gan, kalo setting biar otomatis TOC terbuka saat kita membuka artikel gmn ya?

    Karena dr code yg agan share tersebut, saat kita membuka artikel TOC default nya tertutup

    Tksh gan

    • Ahmad Ansori
      Ahmad Ansori 28 Juli, 2020 05:26

      Tidak tau gan,, coba di utak atik scriptnya

  • Jayden Moura
    Jayden Moura 17 Agustus, 2020 16:59

    gan, kalau toc ini ditaruh di seperempat halaman artikel, gimana ngaturnya?

    • Ahmad Ansori
      Ahmad Ansori 17 Agustus, 2020 20:24

      kurang tau gan, coba aja diutak atik kodenya

  • Khalis
    Khalis 04 September, 2020 16:42

    Nice min, work it ^^

    • Ahmad Ansori
      Ahmad Ansori 04 September, 2020 16:57

      oke gan, mudah kan pasangnya :D

  • Tafkur Bahril Wahid
    Tafkur Bahril Wahid 15 Oktober, 2020 09:44

    Om Ansori, itu cara buat header ansoriweb nya gimana? apa format gambarnya? Saya pasang yang vector, tapi tetep aja burik kalo di zoom in. Kok punya lu nggak Om? ini VioMagz kan Om?

    • Ahmad Ansori
      Ahmad Ansori 15 Oktober, 2020 11:26

      Iya mas, soalnya resolusi nya HD

    • Tafkur Bahril Wahid
      Tafkur Bahril Wahid 16 Oktober, 2020 06:49

      Mas buatnya pake apa? Adobe Photoshop (raster) atau Illustrator/Corel (Vector)?

    • Ahmad Ansori
      Ahmad Ansori 17 Oktober, 2020 04:58

      Illustrator mas

  • Aditya Januardi
    Aditya Januardi 21 Oktober, 2020 18:37

    Mas, kalo kita buat table of contents yang bukan otomatis, jadi setiap buat artikel kita buat toc sendiri. itu bisa diindex google ga ya? jadi biar bisa ada tulisan jump to blablabla gitu di google search nanti

    • Ahmad Ansori
      Ahmad Ansori 22 Oktober, 2020 12:10

      bisa gan, silahkan dicoba

  • Tri Winoto
    Tri Winoto 13 Desember, 2020 23:36

    Berhasil . Terima kasih bosku. Biasanya saya membuat TOC manual. Itu lumayan memakan waktu. Untung lihat artikel ini.

  • iMujiono
    iMujiono 19 Januari, 2021 21:22

    terima kasih turotialnya sangat bermanfaat.

    • Ahmad Ansori
      Ahmad Ansori 20 Januari, 2021 09:55

      Alhamdulillah, semoga bermanfaat 😁

  • Sapujagad.org
    Sapujagad.org 11 Maret, 2021 23:35

    sudah bisa mas, kendalanya daftar isi konten masih tertutup

    • Ahmad Ansori
      Ahmad Ansori 15 Maret, 2021 19:48

      oke gan sip :D

    • Sapujagad.org
      Sapujagad.org 21 Maret, 2021 00:30

      sudah berhasil tampil default daftar isi kontennya gan, bisa dilihat disini https://www.sapujagad.org/2021/03/rencana-keselamatan-konstruksi-rkk-2020.html#top

    • Ahmad Ansori
      Ahmad Ansori 21 Maret, 2021 05:58

      mantab gan :D

  • M. Riskiyanto
    M. Riskiyanto 07 Oktober, 2021 14:38

    Assalamu`alaikum, kak.
    Mohon maaf. Saya ingin bertanya, "Saya sudah nyoba beberapa kali tapi TOCnya kok belum muncul di halaman postingan ya kak? Kira2 permasalahnnya apa? Terima kasih.

  • UNIBLANK
    UNIBLANK 18 Maret, 2022 13:58

    Alhamdulillah Berhasill Terimakasih kak jadi bagus tampailannya. otomatis gak ribet tanpa edit tiap postingan. makasih banget, kunjungi blog saya di tipsbaru.com ya kak

  • Daluang 165
    Daluang 165 06 Juni, 2022 23:29

    Sukses dipasang. Terimakasih ilmunya

    • Ahmad Ansori
      Ahmad Ansori 08 Juni, 2022 18:38

      siap gan

  • Kadji
    Kadji 15 Juli, 2022 11:25

    Konten yang sangat bermanfaat. Izin memakai kodenya bang. Btw salam kenal ya jangan lupa mampir blogku juga. Hehe

  • narania
    narania 10 Oktober, 2022 13:18

    Terimakasih informasinya sangat bermanfaat, yuk kunjungi alamat website kampusku ya di walisongo.ac.id disana banyak info menarik yang bisa meningkatkan literasi kita

  • Daluang 165
    Daluang 165 11 Oktober, 2022 12:41

    Terimakasih ilmunya jgn lupa mmpir ya bang😁

  • Fighaz Mc
    Fighaz Mc 15 November, 2022 15:01

    Berhasill.......πŸ˜„πŸ˜„πŸ˜„πŸ˜„πŸ˜„

  • Helenamantra
    Helenamantra 08 Januari, 2023 07:14

    mas, data post body yang di artikel ini dengan yang di video kenapa beda ya isinya?

  • Roy Darmawan
    Roy Darmawan 09 Februari, 2023 16:31

    work gan, mantappppp

  • Ceramah Myamin
    Ceramah Myamin 20 Juni, 2024 01:42

    bagus gan tampilannya namun belum coba. jangan lupa berkunjung ya gan di
    ceramah

Add Comment
comment url