Cara Membuat Daftar Isi Automatis, Table of Content (TOC) pada Platform Blogger


0

Daftar Isi atau Table Of Content (TOC) pada postingan blog seperti wikipedia bisa kita buat sendiri pada blog kita dengan cara yang benar. Daftar isi atau TOC membantu pembaca untuk memahami isi dari postingan artikel pada blog kita. Pada Artikel kali ini DemosWebId akan mengulas tentang Cara Membuat Daftar Isi Automatis, Table of Content (TOC) pada Platform Blogger , yuk kita mulai saja.

  1. Apa itu Daftar Isi atau Table Of Content (TOC)?
  2. Manfaat Daftar Isi atau Table Of Content (TOC)
  3. Cara Membuat Daftar Isi atau Table Of Content (TOC)

Apa itu Daftar Isi atau Table Of Content (TOC)?

Daftar Isi yang dimaksud dalam artikel ini adalah daftar isi otomatis yang menjelaskan halaman posting blog. Dengan Daftar Isi atau Table Of Content (TOC) ini, pembaca dapat memahami dan mengetahui apa yang dibahas dan ditulis dalam postingan artikel blog. Daftar Isi atau Table Of Content (TOC) ini juga merupakan link halaman dimana jika pembaca mengklik salah satu Daftar Isi atau TOC maka link tersebut langsung melompat ke judul kata kunci yang diklik.

Manfaat Daftar Isi atau Table Of Content (TOC)

Beberapa keuntungan jika kita menggunakan Daftar Isi atau Table Of Content (TOC) dalam memposting artikel blog:

Table Of Content (TOC) akan memudahkan pengunjung/pembaca untuk menemukan pembahasan yang ingin mereka baca hanya dengan mengklik link yang telah disediakan serta memudahkan mesin pencari seperti google, bing, yahoo dll untuk mengenali postingan artikel kita karena dianggap lebih informatif bagi pengunjung/pembaca dan juga membuat postingan artikel blog kita lebih profesional.

Cara Membuat Daftar Isi atau Table Of Content (TOC)

Berikut cara memasang atau membuat Daftar Isi atau Table Of Content (TOC) otomatis untuk postingan blog. Kode-kode ini harus dipasang di template blog dan di postingan.

1. Klik Tema > Edit HTML
2. Salin kode Daftar Isi CSS untuk Blogger ini di atas kodeĀ  ]]</b:skin>

.mbtTOC {background-color: #eee;color: #707037;line-height: normal;margin: 10px 0;padding: 10px 0;width: auto;}  
.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:#c00; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#eee;font-size:16px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px;font-weight:700} .mbtTOC button:after{content: &quot;\f03a&quot;; font-family:FontAwesome;position:relative;left:5px;font-size:14px;font-weight: 300;}

3. Copy dan Paste kode JS TOC for Blogger berikut ini di atas kode

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'> 
//<![CDATA[ 
function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[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>
</b:if>

4. Pastikan ada Link Font Awesome di template blog Anda. Jika belum, ada tambahkan pula kode berikut ini di atas kode

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

Font Awesome digunakan untuk memunculkan icon dalam Daftar Isi.

5. Cari dan ganti kode kode posting (biasanya kode kedua) dengan kode ini:

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

6. Silahkan Save Template.

Pemasangan kode daftar isi sudah selesai di template. Kini cara memunculkan Daftar Isi atau TOC dalam postingan. Memunculkan Daftar Isi di Halaman Posting Pastikan postingan Anda memiliki minimal dua subjudul (subheading) dengan heading tags H3. Bisa juga dipasang di artikel yang suda ada, asalkan itu tadi… minimal ada dua subjudul.

Selesai menulis postingan, atau saat mengedit postingan, klik Mode HTML, lalu pasang dua kode ini:

1. Copy dan Paste kode berikut ini di bawah alinea pertama atau sebelum subjudul pertama:

<div class="mbtTOC"> 
<button onclick="mbtToggle()">Daftar Isi</button> 
<ol id="mbtTOC"></ol> 
</div>

Anda bisa ganti tulisan Daftar Isi dengan Table of Content.

2. Copy dan Paste pula kode berikut ini di bagian akhir postingan:

<script>mbtTOC();</script>

Demikian artikel tentang Cara Membuat Daftar Isi Automatis, Table of Content (TOC) pada Platform Blogger yang dapat DemosWebId bagikan. Semoga dengan adanya artikel kali ini sangat bermanfaat untuk anda. Selamat mencoba.

Sumber : romelteamedia.com


Like it? Share with your friends!

0

What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
DemosWebId

DemosWebId Merupakan Situs Media Informasi Tentang Bisnis, Teknologi, Android, Windows, Tutorial, Tips dan Trik dan beberapa informasi Terbaru Menarik lainnya.

0 Comments

Your email address will not be published. Required fields are marked *