Table of Contents (TOC)
Table of Contents (TOC) atau disebut juga daftar isi, yang dimana fitur yang kelihatannya seperti biasa-biasa aja justru malah fitur ini yang sangat diperlukan di artikel blog, karna membantu pembaca/pengunjung blog, bisa lebih mudah menemukan poin-poin penting dalam isi artikel.
Daftar isi bukan hanya digunakan untuk buku cetakan aja, tapi dalam artikel postingan blog atau situs web juga sangat penting, apalagi artikel postingannya lumayan panjang sekali. Jadi dengan Table Of Content (TOC) atau Daftar isi inilah maka akan sangat memudahkan pembaca atau pengunjung blog untuk memahami keseluruhan isi dari artikel yang dibacanya.
Banyak sekali situs-situs besar yang menggunakan Table Of Content (TOC) atau Daftar isi pada artikel yang mereka terbitkan. Salah satunya yaitu Wikipedia, yang dimana tampilan Table Of Content (TOC) atau Daftar isi nya simple tapi cukup membantu pembaca untuk memahami dan menemukan inti dari artikel tersebut.
Manfaat Table Of Content (TOC)
Ketika membaca sebuah artikel, pastinya kita harus tau apa aja inti dari artikel tersebut, maka diperlukan Table Of Content (TOC) untuk mempermudah pembaca.
Selain itu, ternyata bukan cuma pembaca atau pengunjung blog aja yang suka dengan adanya Table Of Content (TOC) di artikel yg dibacanya, tapi juga bot mesin telusur, terutama Google Search Engine juga suka dengan konten yang ada Table Of Content (TOC) nya. Pada intinya, ketika dalam sebuah postingan blog ada Table Of Content (TOC) nya, maka bot google akan mudah merayapi dan memahami konten yang ada di dalamnya, maka konten pun akan cepat juga diindex.
Manfaat lain dari adanya Table Of Content (TOC) nya di blog adalah pengunjung jadi mudah mengakses konten mana yang mereka butuhkan tanpa harus men-scroll konten, tapi cukup klik di bagian Table Of Content (TOC) nya maka secara otomatis akan bergulir ke konten yang di butuhkan.
Di bawah ini saya akan membagikan tutorial Membuat Table Of Content (TOC) Responsive Di Blog , yg dimana cara membuatnya cukup mudah & simple, dan tampilan nya pun minimalis , tapi tidak mengurangi fungsinya yg berguna & penting untuk postingan blog.
Membuat Table Of Content (TOC)
1. Login ke blogger.com
2. Di dashboard blogger, klik Tema >> Edit Tema , lalu copy kedua script eksternal link di bawah ini dan paste di atas </head> (tapi kalau di tema blog sudah ada diantara satu atau keduanya, maka tidak perlu lagi)
<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'/>3. Copy kode di bawah ini, lalu paste di atas </head> juga
<script type='text/javascript'>
//<![CDATA[
//**Table Of Content (TOC) by wenxploit
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>4. Selanjutnya, masih dalam pengeditan tema, copy kode di bawah ini dan paste di atas </style>
/* Table Of Content (TOC) by wenxploit */
.mbtTOC{border:2px solid #000;box-shadow:1px 1px 0 #fff;background-color:#FFF;color:#000;line-height:1.0em;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:#fff; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#000;padding:0 0 0 15px;}
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}5. Berikutnya, cari kode <data:post.body/> , biasanya ada lebih dari satu <data:post.body/> , maka pilih <data:post.body/> yang kedua atau yg ketiga , lalu ganti <data:post.body/> dengan
<div id="post-toc"><data:post.body/></div>6. Terakhir, klik Simpan Tema
Cara Menggunakan Table Of Content (TOC)
1. Saat akan membuat artikel baru, pada text editor blogger klik HTML , copy kode di bawah ini dan paste di bawah foto thumbnail postingan atau sebelum memulai menulis artikel, lihat kode & gambar di bawah ini
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
<ol id="mbtTOC"></ol>
</div>
2. Masih di bagian HTML , untuk menyematkan tulisan mana aja yang ingin disematkan di Table Of Content (TOC) nya, cukup tambahkan <h2> dan </h2> di tulisan yg ingin disematkan, contoh
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
<ol id="mbtTOC"></ol>
</div>
<h2>Heading</h2>
Bla bla bla...
Bla bla bla...
<h2>SubHeading</h2>
Bla bla bla...
Bla bla bla...
<h2>Minor Heading</h2>
Bla bla bla...
Bla bla bla...3. Berikutnya, copy kode di bawah ini lalu paste di paling akhir tulisan artikel (sebelum artikel dipublikasikan)
<script>mbtTOC();</script>Maka jadinya seperti ini
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
<ol id="mbtTOC"></ol>
</div><h2>Heading</h2>
Bla bla bla...
Bla bla bla...
<h2>SubHeading</h2>
Bla bla bla...
Bla bla bla...
<h2>Minor Heading</h2>
Bla bla bla...
Bla bla bla...
<script>mbtTOC();</script>4. Setelah semua kiat di atas tadi sudah diikuti dan diterapkan, maka artikel siap dipublikasikan
Gimana?
Cukup mudah & simple bukan tutorial dari saya tentang cara Membuat Table Of Content (TOC) Responsive Di Blog ini?
Sekarang dengan adanya Table Of Content (TOC) di postingan blog, maka pembaca atau pengunjung blog pun lebih gampang memahami & mencari inti dari isi postingan tersebut.
Semoga bermanfaat!