Cara membuat daftar isi Konten otomatis pada blog

Daftar Isi [Lihat]

Pada tulisan kali ini saya akan memahas tentang cara membuat dafta isi otomatis pada website atau blog yang menggunkan platform blogger.

Biasanya di sebut sebagai TOC ( table of conten) yakni sebagai uraian singkat isi postingan yang bisa menjadi navigasi pengunjung menjadi lebih memahami isi dari artikel.

Hal tersebut cukup penting loh untuk kelangsungan SEO Atau optimasi Search engine. 

Cara Membuat Daftar Isi Otomatis Artikel Platform Blogspot

Tidak saya tulis panjang lebar lagi, berikut tutorial dan script selengkapnya:


Masuk ke akun Blogger anda. Pilih menu Tema. Klik tombol Edit HTML.

Cara membuat daftar isi artikel Blog otomatis

Selanjutnya silahkan copy script di bawah, lalu paste datas kode </head>. Untuk mempermudah mencari kode terseut anda bisa menggunakan fitur pencarian dengan cara tekan CTRL+F pada keyboard komputer.

Cara membuat daftar isi otomatis blogspot


Berikut kode table Of kontent Otomatis yang harus di letakan diatas Head

<b:if cond="data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;">

<style media="all" type="text/css">

/* 

 * Blogspot TOC

 * https://bibit.ws/toc-di-blogspot.php

*/

.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">

/* 

 * SEO Friendly Blogspot Table Of Contents

 * https://bibit.ws/toc-di-blogspot.php

*/

//<![CDATA[

function bwstoc() {

 var bwstoc = i = headinglength = getheading = 0;

 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;

 if (headinglength > 1) { 

 // Hanya Tampil Jika Ditemukan Minimal 2 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>

Nah dari sekaian banyak tutorial cara membuat toc (table of content) blogspot yang paling keren sih dari mas bibit ws. Pasalanya kita tidak perlu membuat id pada artikel yang akan di jadikan daftar isi.

Kamu hanya perlu menambahakan kode di bawah ini untuk pemanggilan id sehingga muncul sebagai list konten yang ada pada postingan kamu.

Cara membuat TOC otomatis sebagai berikut

Setelah memasakukan kode diatas head, langkah selanjutnya adalah menempatkan kod di awah ini sebagai pengganti kode <data:post.body/> .

Langkahnya, Masuk ke dasborb blogger kamu, lalu pilih "tema " dan edit HTML.

Lakukan pencaian <data:post.body/> dengan cepat melalu perintah CTRL+F, kemudain ganti kode dibawah.

Cara pasang daftar isi otomatis di blog

<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><!-- end TOC -->

Biasanya terdapat 2 hingga 3 Kode <data:post.body/>, kamu bisa mencoba nya satu persatu. Biasanya tedapat pada kode ke tiga, namun hal ini tergantung juga dari si pembuat tema.

Demikian artikel saya kali ini tentang cara membuat daftar isi otomatis pada artikel yang bisa saya bagikan. Sumber :https://bibit.ws/toc-di-blogspot.php

0 Response to "Cara membuat daftar isi Konten otomatis pada blog "

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel