Beberapa waktu yang lalu, rasanya sudah sangat bahagia tak terkira, karena akhirnya aku berhasil juga memasang Daftar Isi artikel pada postingan blog atau yang biasa disebut Table of Content di blog Diarigunarti ini. Tapi.., gara-gara kurang teliti, sewaktu ganti template blog tanpa mencadangkannya terlebih dahulu, akhirnya Daftar Isi tersebut hilang atau tidak bisa muncul di template yang baru terpasang.
Dan lucunya lagi, aku lupa bagaimana cara memasang daftar isi Table of Content otomatis tersebut. Parahnya lagi, aku juga lupa dari situs mana aku mendapatkan kode html nya. Spontan saja aku langsung tepok jidat, cape' dehh....hehe...
Akhirnya nyoba' browsing-browsing lagi mencari situs sumber dimana aku pernah mendapatkan kode html daftar isi postingan blog otomatis.
Mungkin Anda yang membaca tulisan ini bertanya-tanya, apa sih yang di maksud Table of Content (TOC) tersebut? Dan seberapa penting perannya pada sebuah Blog hingga membuat aku sedemikian panik ketika Daftar Isi tiba-tiba tidak bisa muncul pada postingan artikel di Blog yang aku kelola ini?
Baiklah...,aku akan coba jelaskan satu persatu, mulai dari pengertian, sejarah, fungsi dan cara memasangnya di blog blogspot.
Apa yang di maksud Daftar Isi Postingan (Artikel) Blog
Menurut situs Wikipedia, pengertian Daftar isi atau yang dalam bahasa inggris disebut Table of Contents (TOC) adalah suatu daftar yang terdapat pada sebuah halaman artikel atau karya tulis, yang berisi judul bab (heading), sub judul (Sub Heading) dan bagian (judul kecil) dari karya tulis atau artikel tersebut, dengan disertai deskripsi pada masing-masing bagian tersebut, yang biasanya di tunjukkan dengan penomoran halaman awal tiap bab yang terkait.
Sederhana nya begini, daftar isi merupakan bagian-bagian artikel berupa judul dan sub judul turunannya, yang disusun dalam bentuk tabel atau daftar, biasanya ditandai dengan nomor atau abjad atau keduanya sebagai urutan strukturnya.
Kalau masih bingung, apa itu Daftar isi atau Table of Content, kalian bisa lihat bagian paling atas setelah judul pada postingan artikel di Blog ini, seperti pada gambar tangkapan layar di bawah ini.
 |
Di blog ini, aku menggunakan template blog dengan fitur mode gelap dan mode terang. Gambar diatas adalah gambar tangkapan layar tampilan daftar isi artikel blog dalam mode gelap, sedangkan gambar bawah adalah tangkapan layar tampilan daftar isi artikel blog dalam mode terang.
Sejarah Daftar isi
Dalam sejarah, tidak di ungkap secara pasti kapan tepatnya konsep Daftar Isi pertama kali di gunakan pada sebuah karya tulis, yang jelas seorang penulis dan filsuf bernama Gaius Plinius Secundus (23 Masehi – 25 Agustus 79) atau The Elder Pliny (dalam bahasa latin:Plinius Maior) atau biasa di sapa Pliny ini mengungkap bahwa Daftar Isi pertama kali di gunakan oleh seorang politikus sekaligus penulis Quintus Valerius Soranus (wafat 82 SM).
Dari sedikit kutipan sejarah di atas, menandakan bahwa Daftar Isi sudah di gunakan sejak lama dalam sebuah karya tulis, dengan tujuan sebagai alat navigasi yang membantu memudahkan pembaca menemukan bagian dari sebuah artikel yang mereka cari.
Terutama untuk karya tulis atau artikel yang panjang yang terdiri dari beberapa bab, puluhan hingga ratusan halaman dan ribuan kata.
Pliny sendiri juga menggunakan Daftar Isi yang lengkap dalam buku ensiklopedia berbahasa Latin berjudul Naturalis Historia (Sejarah Alam) yang diterbitkan sekitar tahun 77-79 Sebelum Masehi (SM)
Apakah Fungsi dari Daftar Isi atau Table of Content?
Lalu,seberapa penting fungsi dari Daftar isi pada postingan blog atau situs web?
Dilihat dari sejarahnya, Daftar isi tentu memiliki fungsi yang sangat penting sekali dalam sebuah karya tulis. Itulah sebabnya mengapa konsep daftar isi atau Table of Content ini sudah digunakan sejak jaman dahulu kala, bahkan sejak jaman Sebelum Masehi (SM).
Dari sudut pandang pribadiku sebagai orang awam, aku sendiri menganggap daftar isi memiliki fungsi dan peran yang sangat penting pada karya tulis pada umumnya dan dalam sebuah postingan Blog pada khususnya.
Artinya...,kehadiran Daftar Isi Postingan Blog ini, selain membuat tampilan Blog kita tampak profesional, juga mempermudah pengunjung blog menemukan judul dan sub judul serta bagian-bagian artikel yang mungkin sedang mereka cari, tanpa harus susah payah membaca keseluruhan isi artikel terlebih dahulu.
Bayangkan betapa capeknya kita jika harus membaca buku yang tebalnya mencapai puluhan hingga mendekati ribuan halaman, atau sebuah artikel yang panjangnya mencapai ribuan kata, tanpa ada petunjuk atau alat navigasi judul atau poin penting artikel yang sedang kita cari.
Nah...dari sini tentu kalian paham kan...mengapa kehadiran Daftar Isi ini sangat penting sekali, intinya ya.. untuk memudahkan pembaca atau pengguna agar bisa langsung menuju poin yang di cari (to the point).
Tak hanya itu, dari segi SEO Daftar isi ini juga menjadi salah satu syarat (meskipun tidak mutlak) agar blog atau situs web yang kita kelola menjadi semakin optimal. Dan ini terbukti mampu menaikkan rangking atau peringkat blog kita di pencarian Google.
Kok bisa? Iya, Karena robot google sendiri sangat menyukai artikel-artikel yang panjang dengan navigasi Url permalink yang jelas,seperti Daftar Isi Otomatis di postingan ini.
Jadi...lebih detailnya, Daftar isi atau Table of Content,memiliki fungsi sebagai berikut:
1.Membuat tampilan blog lebih cantik,keren dan profesional
Jika dilihat dari segi tampilan,kehadiran Daftar Isi Postingan atau artikel Blog ini bisa menambah nilai (view) dari Blog itu sendiri,Blog terlihat lebih cantik,keren dan profesional.
Kehadiran Daftar isi Artikel Blog ini selain mampu memanjakan mata pengunjung blog kita,juga memberi kesan bahwa blog kita dibuat dan dikelola dengan sungguh-sunguh oleh pemiliknya.menyajikan data artikel yang lengkap,sistematis dan dinamis seperti yang di tunjukkan dalam Daftar isi Postingan Blog atau situs web tersebut.
2.Meningkatkan SEO (SEO friendly)
Sebagai seorang blogger kita tentu paham donk, apa yang di maksud dengan tehnik SEO? Yaitu strategi dalam dunia blogging untuk mengoptimalkan blog atau situs web agar mampu bersaing di peringkat teratas mesin pencari, atau biasa dikenal dengan istilah Search Engine Optimation (SEO).
Menurut para pakar SEO, mencantumkan Daftar Isi atau Table of Content dalam setiap postingan artikel blog adalah termasuk salah satu cara untuk meningkatkan tehnik SEO pada Situs web atau Blog kita.
Karena ketika kita klik salah satu poin dari Daftar Isi Postingan artikel tersebut, maka secara otomatis akan menampilkan URL permalink dari postingan artikel kita. Inilah yang disukai robot google pada Blog atau Situs web.
Seperti sudah saya sampaikan diatas, bahwa robot google sangat menyukai blog atau situs web yang menampilkan system navigasi yang jelas pada blog atau situs web tersebut, salah satunya navigasi Daftar Isi atau Table of Content ini. Dan inilah yang biasa disebut dengan istilah ramah SEO (SEO friendly).
3.Memudahkan kita sebagai penulis untuk mengatur poin-poin penting dalam sebuah artikel secara otomatis dan sistematis
Ada beberapa macam Daftar isi yang kita kenal. Daftar isi postingan blog Otomatis, Daftar isi postingan blog manual, Daftar isi berdasarkan kategori atau label, Daftar Isi yang menampilkan judul saja.
Sesuai judulnya, pada artikel kali ini, secara khusus aku hanya membahas tentang Daftar isi Artikel Otomatis dan Responsif di Blogspot. Dan sesuai namanya, Daftar Isi Otomatis ini fungsinya jelas untuk mempermudah dan mempercepat pekerjaan kita sebagai blogger.
Jadi, setelah kode-kode HTML Daftar isi (TOC) sudah kita pasang di halaman HTML template blog kita dengan benar, maka untuk selanjutnya kita tidak perlu lagi bersusah payah membuat struktur atau table daftar isi satu persatu (manual)
Ribet kan...kalau harus bolak-balik ke halaman edit HTML.Apalagi untuk blogger pemula seperti aku ini,tentu butuh cara yang sederhana dan cepat namun hasilnya tetap memuaskan.
Sehingga memasang daftar isi artikel secara Otomatis di blog menjadi pilihan yang tepat. Dan hasilnya pun sangat sesuai dengan yang aku harapkan.
Kita hanya perlu membuat artikel dengan struktur h1,h2,h3 dan seterusnya, maka Daftar isi Otomatis tersebut bisa langsung muncul secara otomatis di postingan artikel blog atau situs web kita. Simple kan...
4.Memudahkan pengguna atau pembaca menemukan isi artikel yang mereka cari (user friendy)
Tak hanya memudahkan kita sebagai penulis, peran Daftar Isi Artikel ini juga sangat membantu mempermudah dan mempercepat pengguna atau pengunjung Blog menemukan poin-poin artikel yang mereka cari.
Dari segi SEO tentu saja hal ini meningkatkan pengalaman pengguna pada Blog kita,membuat pengguna betah nongkrong sambil ngopi di blog atau situs web kita hehe..., istilah bloggingnya ramah pengguna atau User friendly.
Cara memasang daftar isi artikel secara Otomatis di Blogspot
Lantas bagaimana cara memasang Daftar Isi Artikel Otomatis dan Responsif seperti yang sudah aku bahas di atas?
Ini temasuk gampang-gampang susah, karena harus berurusan dengan kode-kode html, karena untuk Blogspot sendiri belum ada plugin khusus untuk memasang daftar isi artikel, berbeda dengan Platform Wordpress, yang memang menyediakan plugin-plugin khusus untuk memudahkan aktivitas blogging penggunanya, termasuk plugin Daftar Isi
Tapi jangan khawatir, asal kita mau belajar dan mengikuti step-step nya dengan benar, pasti akan berhasil.
Sebagai pemula, aku sendiri sempat kebingungan mencari-cari tutorial yang pas dan sesuai dengan
template blog yang aku pakai ini.Berkali-kali mencoba berbagai tutorial yang aku baca, tapi masih gagal juga, hingga sering karena ketidaktahuan ku, terpaksa aku ganti template lagi.
Nah...pada tulisanku kali ini, sengaja aku bagikan cara yang lebih mudah dan
cepat.
Apalagi buat kita yang masih pemula di dunia blogging dan belum begitu paham tentang coding, biar gak bingung dan ribet.
Cara ini sangat aku rekomendasikan buat kalian yang ingin menambah tampilan blog nampak profesional, SEO friendly dan tentunya
User friendly.
Disini aku mengadopsi tutorial dari blog nya Mbak Reisha. Selain mudah, step-stepnya juga gak ribet. Hasilnya? Kalian bisa lihat di blog ku ini atau pada tangkapan layar di atas.
Mbak Reisha juga sudah meng utak atik kode CSS dan HTML susunan table nya supaya ada pembeda jarak antara Heading(h2), Sub heading(h3), Minor Heading (h4), dan seterusnya sehingga tampilannya tidak monoton atau sejajar.
Baiklah... langsung saja yuk kita simak sekaligus langsung kita praktekkan biar lebih afdol, karena kata orang bijak, teori tanpa praktek itu percuma dan sia-sia ;)
1. Langkah pertama, cadangkan template Blog
Yang pertama kali harus kita lakukan sebelum mengedit tema atau memasang,membuat menambah,mengurangi kode apapun di halaman edit HTML, aku sarankan untuk mem backup atau mencadangkannya terlebih dahulu.
Tujuannya adalah agar ketika terjadi kesalahan atau error kita gak perlu panik dan bisa kembali memasang template yang sudah kita cadangkan tadi.
Caranya, masuk ke Dasbor akun Blogger kalian,pilih menu Template/Tema lalu pilih Cadangkan.
2. Langkah kedua,
Setelah template kita cadangkan, tetap di dasbor Blogger>> Tema/template>>edit HTML>>lalu klik kiri di bagian mana saja dan ketikkan ctrl+F, disini akan muncul kolom pencarian (search) html, syntax, css dkk, lalu ketikkan kode ini </head>, setelah ketemu kode tersebut, salin kode di bawah ini dengan ctrl+C
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<style media='all' type='text/css'>
.bwstoc { margin: 10px 0; background: #f0f0f0; border: 1px solid #ddd; }
.bwstoc ol, .bwstoc ul { margin: 0 0 15px 15px !important; padding: 0 !important; }
.bwstoc ul { background: 0 0; list-style-type: none; list-style: none; }
.bwstoc ol li, .bwstoc ul li { font-size: 95%; padding: 5px 10px 0 0; margin: 0 !important; }
.bwstoc ol li:before, .bwstoc ul li:before { display: none; }
.bwstoc li.toc-h3 { padding-left: 15px; }
.bwstoc li.toc-h4 { padding-left: 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>
<script type='text/javascript'>
//<![CDATA[
function bwstoc() {
var bwstoc = (i = headinglength = getheading = 0);
headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
if (headinglength > 1) {
for (i = 0; i < headinglength; i++) {
getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
var toc_class = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].tagName.toLowerCase();
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 class='toc-"+ toc_class +"'><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>Lalu pastekan tepat di atas kode </head> tadi, atau pada tanda panah merah seperti contoh gambar di bawah ini,
.png "cara memasang daftar isi otomatis di blogspot")
3. Langkah ketiga
Jangan simpan dulu template Anda, langkah selanjutnya adalah memasang kode pemanggil TOC, caranya salin kodenya di bawah ini,
<div id='post-toc'>
<div class='bwstoc' id='bwstocwrap' style='display: 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>lalu kembali lagi ke dasbor Blogger>>Tema/Template>>Edit HTML>>klik kiri di bagian mana saja lalu tekan shortcode Ctrl+F >>ketikkan kode <data:post.body/> di kolom pencarian, lihat seperti contoh gambar di bawah ini:
.png "Cara memasang Daftar Isi Otomatis di Blogspot")
Kode di atas untuk Daftar isi dengan tampilan tersembunyi atau tertutup, sehingga ketika pengunjung blog ingin mengetahui isi dari Daftar isi tersebut harus meng-klik tulisan [Tampil] terlebih dahulu.
Tetapi jika kalian ingin menampilkan Daftar Isi dengan tampilan langsung terbuka tanpa harus meng-klik tulisan [Tampil], kalian hapus saja tulisan style='display:none;' pada kode di atas, sehingga kodenya berubah seperti berikut:
<div id='post-toc'>
<div class='bwstoc' id='bwstocwrap' style='display: block;'>
<div class='bwstocHeader'>Konten [<a id='bwstocLink' onclick='bwstocShow()'>Tampil</a>]</div>
<ul id='bwstoc' />
</div>
<data:post.body/>
<script>
bwstoc();
</script>
</div>Kalian bisa ganti tulisan Konten sesuai keinginan kalian, misalnya di ganti dengan Daftar isi, Isi Artikel ini, Table of Content dan lain-lain.
Setelah ketiga langkah di atas selesai, kini tinggal kita klik save template yang ada di bagian kanan atas, dan lihat hasilnya di Blog masing-masing. Bagaimana? Mudah bukan?
Mengapa Daftar Isi (TOC) tidak muncul pada Postingan artikel Blog?
Mungkin di antara kalian ada yang pernah mengalami hal ini, di mana ketika kita sudah mengikuti langkah demi langkah Cara Membuat Daftar Isi Postingan di Blogspot dengan benar dan sesuai tutorial.
Namun, Daftar isi artikel yang di maksud belum juga bisa muncul di postingan blog kalian.
Setelah aku coba pelajari, ternyata ada beberapa faktor yang bisa menjadi penyebab munculnya masalah tersebut, diantaranya adalah:
- Struktur artikel yang kita tulis belum memenuhi syarat untuk menampilkan Daftar Isi secara otomatis.Seperti kita ketahui, syarat utama agar Daftar Isi bisa muncul di postingan blog secara otomatis yaitu harus memiliki setidaknya lebih dari satu Heading(h2) dan Sub Heading (h3).Jadi ketika menulis sebuah artikel sebaiknya harus jelas struktur h2,h3,h4 dan seterusnya. Seperti yang sudah aku sampaikan di atas.
- Salah menempatkan kode HTML yang di maksud. Di sinilah pentingnya ketelitian dan kejelian kita saat berurusan dengan kode-kode HTML dan kawan-kawannya
- Sebelum menyimpan tema, coba periksa kembali apakah semua kode <data:post.body/> yang ada di tema blog kalian sudah di ganti semua dengan kode pemanggil TOC di atas. Karena ada beberapa template blog yang hanya terdapat satu kode <data:post.body/> , namun ada juga yang menampilkan lebih dari satu.
Kesimpulan
Dunia Blogging sangat erat kaitannya dengan SEO.Bukan sekedar aktivitas menulis, dan posting artikel pada sebuah Blog atau situs web semata. Tetapi ada beberapa hal tehnis yang harus kita terapkan pada blog atau situs web kita agar Blog yang kita kelola di sukai robot google maupun pengguna (user) kita.
Daftar Isi Postingan Blog atau Table of Content menjadi salah satu bagian penting pada sebuah situs web atau blog agar bisa lebih optimal dari segi SEO, profesional dari segi tampilan dan ramah pengguna karena penampakan strukturnya yang responsif, cantik dan menarik.
Sehingga Blog yang sudah kita kelola dengan susah payah mampu bersaing di halaman pertama mesin pencari Google (page one).
Terima kasih sudah membaca, semoga bermanfaat. Jangan lupa bagikan pengalaman Anda terkait tulisan ini di kolom komentar ya, karena...berbagi itu indah bukan?
Tetap semangat n Happy Blogging.....:)
Posting Komentar