Langsung ke konten utama

Table of Contents (TOC) Otomatis Blogger

Table of Contents (TOC) Otomatis Blogger
Langsung ke konten utama [Tampilkan]

    Memasang Table Of Contents Otomatis - Cara Membuat TOC secara otomatis di semua postingan blogger.Update 29 Juni 2019: Mengubah script table of contents otomatis (menggunakan script yang dibuat oleh bibit.ws) yang pasti efeknya menjadi lebih SEO Friendly karena atribut ID mengikuti judul Heading. Mirip seperti table of contents di wordpress.Script Table Of Contents OtomatisSebelumnya saya sudah pernah membuat tutorial cara memasang table of contents di blogger, namun cara tersebut masih manual.

    Artinya, kita harus kerja ekstra dengan menambahkan attribut ID pada setiap tag heading(h2,h3,h4,h5,h6) artikel jika akan memasang table of contents.

    Nah, untuk tutorial kali ini berbeda dan lebih mudah, script yang dipakai akan mendetek semua tag heading yang ada di dalam artikel kemudian akan ditampilkan menjadi table of contents.

    Jadi, sobat tidak usah ribet untuk menambahkan atribut id dan membuat list secara manual, semua menjadi otomatis.

    Kelebihan Memasang Table Of Contents Otomatis di B…Baca Selengkapnya
    Dian Sandi Utama
    👋 Saya Dian Sandi Utama
    KategoriBlogger

    20 Komentar

    1. Iswanda Maulana Tarigan

      Iswanda Maulana Tarigan

      11/6/19

      Gk muncul sama aja udah di coba di semua script data post body, demonya cantumkan gan

      Balas
      • Dian Sandi Utama

        Dian Sandi Utama

        11/6/19

        Demonya blog ini gan :))

        Tips agar TOC muncul:
        • Pastikan publish artikel saat mode HTML. Kalo di mode compose biasanya Table of Contents tidak muncul..
        • Masih belum muncul? Coba ikuti tutorial pada link yang tertera di akhir artikel Gan.

        Balas
        • Iswanda Maulana Tarigan

          Iswanda Maulana Tarigan

          20/6/19

          Cara pindahin posisi toc ke tengah gimana gan?

          Balas
          • Dian Sandi Utama

            Dian Sandi Utama

            20/6/19

            Saya mengakalinya dengan cara membuat meta deskripsi artikel menjadi paragraf pertama ..

            Caranya, masuk menu editor template » cari <data:post.body/> halaman item(postingan) » kemudian tambahkan
            <b:if cond='data:blog.metaDescription'/>
            <data:blog.metaDescription/>
            <b:if>

            diatasnya..

          • Dian Sandi Utama

            Dian Sandi Utama

            20/6/19

            Koreksi ^_^
            <b:if cond='data:blog.metaDescription'>
            <data:blog.metaDescription/>
            <b:if>

        • Iswanda Maulana Tarigan

          Iswanda Maulana Tarigan

          20/6/19

          cara agar tocnya secara default disembunyikan gimana?

          Balas
      • Dian Sandi Utama

        Dian Sandi Utama

        29/6/19

        Script sudah diperbaharui menjadi lebih SEO Friendly, kalo dipasang dengan benar pasti sukses.
        Kekurangannya, list table of contents script yang baru tidak hierarchy.

        Balas
    2. TumesKecil

      TumesKecil

      30/6/19

      ini demo TOC nya di sebelah kanannya ya?

      Balas
      • Dian Sandi Utama

        Dian Sandi Utama

        30/6/19

        Iya benar, Kalo kurang sreg dengan stylenya. Silahkan dioprek-oprek lagi CSS Table of Contents nya

        Semoga Bermanfaat yaa..

        Balas
    3. Ukim Season II

      Ukim Season II

      17/7/19

      Kalau yang di pasang di blog ini Auto/Manual mas ?

      Balas
      • Dian Sandi Utama

        Dian Sandi Utama

        17/7/19

        Otomatis, soalnya

        Balas
      • Dian Sandi Utama

        Dian Sandi Utama

        17/7/19

        Saya masuk kategori orang malas. Jangan ditiru yaa 😁

        Balas
        • Ukim Season II

          Ukim Season II

          24/7/19

          Mas ini artikel di atas TOCnya ngambil dari deskripsi ya ? Supaya ngambil paragraf pertama bagaimana ya mas, bukan deskripsi

          Balas
          • Dian Sandi Utama

            Dian Sandi Utama

            26/7/19

            Iya mas tutorial ini mengambil meta deskripsi untuk dijadikan paragraf pertama artikel, kemudian meletakan table of contents dibawahnyaa..

            Cara yang mas mau, blm saya buat tutornya 😁

    4. Unknown

      Unknown

      17/7/19

      kira2 bisa dibuat seperti web toples.web.id gak gan??

      Balas
      • Dian Sandi Utama

        Dian Sandi Utama

        17/7/19

        Daftar isi artikel di blog itu manual gan, saya sudah pernah tulis cara membuat toc blogger seperti itu.. tinggal di oprek cssnya..

        Balas
    5. Anonim

      Anonim

      31/7/19

      Gan bukannya kalopake display: none gak bakal kedetetTOC nya?

      Balas
    6. Halim Labs

      Halim Labs

      16/8/19

      cara agar table of content muncul di sidebar kang

      Balas
      • Dian Sandi Utama

        Dian Sandi Utama

        16/8/19

        Yang saya terapkan di blog ini masih 1 induk dengan badan artikel.

        Badan artikel saya buat float: left
        Sedangkan daftar isi artikelnyafloat: right, position: sticky.

        Contoh singkat susunan kode yang saya pakai:
        <!-- CSS -->
        <style>
        .clear,
        #post-body {
        clear: both;
        }
        .post-toc {
        width: 30%;
        float: right;
        position: -webkit-sticky;
        position: sticky;
        top: 10px
        /* Jika menggunakan header sticky, sesuaikan nilai properti top dengan tinggi header template yang dipakai */
        }
        .post-body {
        width: 70%;
        float: left
        }
        </style>

        <!-- HTML -->
        <div id='post-body'>
        <div class='post-toc'>
        <!-- TOC Otomatis -->

        </div>
        <div class='post-body'>
        <data:post.body/>
        </div>
        <div class='clear'/>
        </div>

        Balas
      • Dian Sandi Utama

        Dian Sandi Utama

        16/8/19

        FYI: Jika tidak berhasil, kemungkinan ada induk yang menggunakan overflow: hidden.

        CSS sticky tidak berfungsi bila induknya menggunakan overflow: hidden.

        Balas
    Tambahkan Komentar