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.
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: "\f03a"; 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 == "item"'>
<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
0 Comments