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
30 Comments
  • Syaffi
    Syaffi 26 July, 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 July, 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 July, 2020 05:26

      Tidak tau gan,, coba di utak atik scriptnya

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

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

    • Ahmad Ansori
      Ahmad Ansori 17 August, 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 October, 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 October, 2020 11:26

      Iya mas, soalnya resolusi nya HD

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

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

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

      Illustrator mas

  • Aditya Januardi
    Aditya Januardi 21 October, 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 October, 2020 12:10

      bisa gan, silahkan dicoba

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

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

  • iMujiono
    iMujiono 19 January, 2021 21:22

    terima kasih turotialnya sangat bermanfaat.

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

      Alhamdulillah, semoga bermanfaat 😁

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

    sudah bisa mas, kendalanya daftar isi konten masih tertutup

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

      oke gan sip :D

    • Sapujagad.org
      Sapujagad.org 21 March, 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 March, 2021 05:58

      mantab gan :D

  • M. Riskiyanto
    M. Riskiyanto 07 October, 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 March, 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 June, 2022 23:29

    Sukses dipasang. Terimakasih ilmunya

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

      siap gan

  • Kadji
    Kadji 15 July, 2022 11:25

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

  • narania
    narania 10 October, 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 October, 2022 12:41

    Terimakasih ilmunya jgn lupa mmpir ya bang😁

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

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

  • Helenamantra
    Helenamantra 08 January, 2023 07:14

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

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

    work gan, mantappppp

Add Comment
comment url