Tutorial Cara Membuat Daftar Isi atau TOC Otomatis di Blogger [Script+Contoh] CSS HTML

Kamu tentu sempat membaca postingan seorang serta dalam postingan itu ada Table Of Contents( TOC) ataupun Daftar Isi? Dalam Daftar Isi yang kamu amati mempunyai suatu link yang memusatkan Kamu langsung mengarah poin inti kasus yang terdapat dalam daftar isi ataupun TOC itu. Bisa jadi beberapa dari kamu pula telah menerapkannya dalam postingan kamu. Tetapi sempat terpikir tidak buat membuat Daftar Isi dengan cara otomatis dalam postingan di Blogger?.

Pengertian

Apa Itu Daftar Isi / Table Of Contents( TOC)?

Table Of Contents( TOC) ataupun daftar isi ialah point- point yang membuktikan apa yang lagi diulas dalam suatu postingan ataupun novel. Gunanya selaku jalan pintas buat mengarah poin yang lagi pembaca cari. Dalam suatu website Daftar Isi berbentuk link yang mengarah langsung pada header dari poin konten. Dalam novel kamu dapat memandang no laman dari header itu.

Pengantar Plugin TOC.

Plugin TOC ini terbuat oleh MyBloggerTrick pada tahun 2017, plugin ini berperan buat membuat Daftar Isi dengan cara otomatis tanpa pengetikan buku petunjuk. Plugin TOC ini memakai Javascript asli alhasil loadingnya kilat serta gampang dirayap oleh mesin pelacak.

Mengapa Wajib Memakai TOC.

Buat webmaster serta blogger yang menulis postingan jauh serta memilah postingan dalam sebagian bagian, pembaca bisa jadi kesusahan membaca artikel jauh semacam itu tanpa terdapatnya pelayaran dari poin berarti. Pemecahan buat membuat pembaca aman merupakan dengan disertakanya daftar isi dalam postingan itu.

Step By Step Memasang Script

1. Masuk ke Blogger Template

2. Backup terlebih dulu template kamu bila terjalin kekeliruan dapat dipulihkan.

3. Klik pada 3 titik disebelah tema serta seleksi Edit HTML.

4. Cari </head> serta copy paste script ini di atasnya :

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>              

//<![CDATA[           

//*************TOC plugin by MyBloggerTricks.com           

function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           

headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           

{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           

//]]>              

</script>

5. Lalu kemudian cari ]]></b:skin> serta pastekan ini diatasnya :

/*####Automatic TOC Plugin by MyBloggerTricks####*/          

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}           

.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           

.mbtTOC ul {list-style:none;}           

.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           

.mbtTOC a{color:#0080ff;text-decoration:none;}           

.mbtTOC a:hover{text-decoration:underline; }

.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}           

.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

6.Yang terakhir yakni mengganti semua script <data:post.body> dengan script :

<div id="post-toc"><data:post.body/></div>

Menggunakan Plugin TOC Pada Postingan

Buat menunjukkan Daftar Isi otomatis pada artikel bloggermu butuh  pemanggilan dengan metode berikut.

Letakkan sembarang tempat di postinganmu, kode berikut :

<div class="mbtTOC"> 

<button onclick="mbtToggle()">Daftar Isi</button> 

<ol id="mbtTOC"></ol> 

</div>

Tambahkan ini di akhir setiap artikel biar script TOC berjalan.

<script>mbtTOC();</script>

Contoh Hasil Daftar Isi

Keunggulan TOC

Manfaat TOC dalam SEO.

TOC membagikan ijmal bawah pada mesin pelacak kepada seluruh postingan Kamu. Tautan pagar“#” di dalam TOC menawarkan khasiat bonus buat usaha SEO Kamu. Google menggemari tautan pagar serta paling utama kala tautan ini berarti serta membagikan pelayaran serta uraian yang lebih bagus mengenai konten web Kamu.

Fitur Plugin TOC

Dikodekan dalam JavaScript murni- hanya 10 baris isyarat!

Enteng serta kilat.

SEO Friendly

Meningkatkan ID istimewa ke tiap bagian dengan cara otomatis.

Membuat daftar dipesan ataupun tidak terurut

Bermuatan tombol Toggle

Tunjukkan di posisi mana juga yang Kamu pilih

Gampang Disesuaikan

Mobile responsif

Scritp cuma berjalan kala dipanggil!

Penutup

Mudah- mudahan Plugin Table of Contents( TOC) ataupun Daftar Isi Otomatis ini dapat menolong Kamu. Baca pula Metode Membuat Multi Tingkat Table of Contents Otomatis di Blogger