Membuat Table Of Content (TOC) di Blogspot dengan Mudah

Hello sobat blogger, artikel kali ini akan membahas seputar Table Of Content atau yang juga sering disebut sebagai TOC Blogger. Lalu apa saja sih yang bisa kita pelajari dari tema dan pokok pembahasan kali ini. Berikut ini adalah daftar isi sekaligus contoh Table Of Content (TOC) di blogger blogspot.

Membuat Table Of Content secara manual satu persatu di setiap artikel yang memang pada dasarnya akan lebih menguntungkan dan bermanfaat jika ditambahkan dengan Table Of Content berikut. Selanjutnya apa aja sih kelebihan dan manfaat membuat Table Of Content berikut penjelasannya.

Kelebihan Membuat Table Of Content

Banyak manfaat yang bisa anda peroleh dengan membuat sebuah table Of Content. Selagi konten tersebut memang masih bisa dikategorikan membutuhkan Table Of Content untuk memudahkan pembaca dalam menelaah setiap kata yang anda tulis dan mempersingkat waktu mereka menentukan topik yang dibahas sebelumnya.

Berikut ini adalah beberapa manfaat dan kelebihan Membuat Table Of Content atau Daftar Isi di Postingan Blog.

Meningkatkan Kualitas Artikel, bisa dikatakan membuat TOC adalah salah satu SEO On page karena pada dasarnya google juga akan lebih mengutamakan situs yang memiliki hak yang lebih dari biasanya salah satunya TOC berikut ini.
Meningkatkan SERP Google, jika diatas disebutkan bahwa TOC adalah salah satu SEO Artikel On page maka sudah pasti jika artikel yang sebelumnya mungkin ada di page 5, lama kelamaan akan meningkatkan dengan sendirinya bisa jadi bahkan ada di page 1.
Meningkatkan Pageview, inilah tujuan akhir dari optimasi Seo On page yakni mendapatkan visitor bejibun. Sehingga penghasilanpun meningkatkan.
Membuat pengunjung lebih nyaman, dengan cara ini anda bisa membuat pengunjung lebih betah lagi ada di artikel anda karena anda membuat beberapa trobosan sekaligus cara agar pembaca lebih mudah menemukan topik yang mereka cari.

Kekurangan Table Of Content Otomatis

Selagi berharap agar artikel anda pageone ada hal lain nih yang mendasari kenapa saya lebih memilih Table Of Content Manual, berikut alasannya.

Tidak cocok untuk beberapa artikel atau konten saya, karena dengan membuat table of content berikut maka otomatis semua artikel anda akan memiliki Table Of Content di setiap artikelnya.
Resiko gagal dan error besar, karena pada dasarnya jika ada kesalahan saat peletakan scriptnya maka akan berdampak ke semua artikel anda.
More .......

Nah setelah menyadari apa saja sih kelebihan, manfaat, dan kekurangan membuat Table Of Content Otomatis maka berikut ini adalah tutorialnya. Perhatian dan teliti dalam menelaahnya agar tidak terjadi error.

Cara Membuat Table Of Content Otomatis

Berikut ini adalah tutorial singkat dan panduan lengkapnya tentang cara membuat Table Of Content di Blog khususnya pengguna platform blogger atau blogspot.

Menuju akses halaman blogger anda.
Selanjutnya klik Theme > Edit HTML.
Berikutnya paste script dibawah ini tepat dibawah Tag (<head>) atau diatas Tag Penutup (</head>)

<script type='text/javascript'>
    //<![CDATA[                   
    function TOCopit() {
        var TOCopit = i = headlength = gethead = 0;
        headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
        for (i = 0; i < headlength; i++) {
            gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
            document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
            TOCopit = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
            document.getElementById("TOCopit").innerHTML += TOCopit;
        }
    }

function mbtToggle() {
    var mbt = document.getElementById('TOCopit');
    if (mbt.style.display === 'none') {
        mbt.style.display = 'block';
    } else {
        mbt.style.display = 'none';
    }
}
//]]>             
</script>

Berikutnya copy dan paste kode ini tepat diatas Tag Penutup (]]></b:skin>) atau (</style>).

/* CSS TOC BLOGGER.ID */
.TOCopit {
    line-height: 1.4em;
    padding: 0 30px 20px 10px;
    display: block;
    width: 95%;
    margin: 0 auto;
    background: #eaeaea;
    border: 1px solid #ccc;
    border-radius: 3px/6px
}
.TOCopit ol,
.TOCopit ul {
    margin: 0;
    padding: 0;
}
.TOCopit ul {
    list-style: none;
}
.TOCopit ol li,
.TOCopit ul li {
    padding: 15px 0 0;
    margin: 0 0 0 30px;
    font-size: 15px;
}
.TOCopit a {
 font-weight: 700;
    color: #4f4f4f;
    text-decoration: none;
}
.TOCopit a:hover {
    text-decoration: underline;
}
.TOCopit button {
    background: #eaeaea;
    font-family: oswald, arial;
    font-size: 20px;
    position: relative;
    outline: none;
    cursor: pointer;
    border: none;
    color: #2d2d2d;
    padding: 20px 0 0 20px;
}
:target::before{content:"";display:block;height:50px;margin-top:-50px;visibility:hidden}

Dan langkah terakhirnya adalah cari kode (<data:post.body/>), lalu ganti dengan kode berikut ini.

<div id='post-toc'>
<div class='TOCopit'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='TOCopit' />
</div>
<data:post.body/>
<script>
    TOCopit();
</script>
</div>

Klik Save atau Simpan template.

Sampai dengan langkah ini jika tidak terjadi error anda bisa melihat demonya di artikel - artikel anda, tapi yang menjadi masalahnya disini adalah jika ada artikel yang tidak semestinya ada TOC-Nya dikasih script diatas maka hal tersebut juga berdampak buruk bagi situs anda.

Lalu bagaimana solusinya, cara dibawah ini adalah solusi yang bisa anda gunakan. Yakni membuat TOC atau Table Of Content Semi Otomatis atau bisa disebut Pra Otomatis.

Cara Membuat Table Of Content Semi Otomatis

Karena pada dasarnya TOC tidak harus ada di semua artikel anda atau untuk beberapa tema contohnya download misalnya maka anda bisa menerapkan Table Of Content atau Daftar Isi semi otomatis di blog anda.

Sebelumnya anda harus menghapus scrip dari pengganti tag (<data:post.body/>) lalu jangan lupa untuk save template.
Selanjutnya klik pada edit postingan atau buat postingan lalu copy script dibawah ini, pastekan tepat di halaman teratas di Postingan anda. Ingat gunakan mode HTML.

<div id='post-toc'>
<div class='TOCopit'>
    <button onclick='mbtToggle()'>Daftar Isi</button>
    <ol id='TOCopit' />
</div>

Lanjut dengan artikel anda gunakan mode compose, selanjutnya di akhir membuat artikel paste kode dibawah ini tepat di halaman postingan terbawah, Ingat gunakan Mode HTML.

<script>
    TOCopit();
</script>
</div>

Terakhir klik preview untuk melihat hasilnya jika sesuai klik publish.

Nah jika berhasil maka daftar isi atau table of content anda akan segera muncul di artikel anda. Jika anda bingung dengan penempatan kode HTML tersebut perhatikan preview dibawah ini.

Preview

Akhir Kata dan Penutup

Demikian adalah tutorial dan cara membuat Table Of Content Otomatis maupun Semi Otomatis di Blogger. Selanjutnya jika ada permasalahan baik saat penempatan kode HTML maupun saat di artikel, silahkan komentar dibawah ini sebisanya saya akan membantu.

source: https://bloggeria-id.blogspot.com/2019/10/cara-membuat-table-of-content-di-blog.html

Kita4Suka