Daftar isi
Untuk Platform Website, Blogger dan WordPress , ini cara membuat daftar isi website blog dengan mudah dan benar. Daftar isi website adalah untuk menavigasi para pembaca. Untuk itu . Pasti anda sering melihat kok website ada daftar isi sih diatasnya ? bagus banget ya.
Berikut kami contohkan daftar isi pada website blog :
Jadi sudah mengerti ya, apa itu yang dimaksud dengan daftar isi pada website blog. Anda dapat menerapkan pada website blog Anda dengan mudah.
Selain untuk mempermudah pembaca dalam menganalisis artikel, membuat daftar isi pada website ternyata juga mempengaruhi seo pada artikel. Karena dengan membuat daftar isi pada website pengguna akan berkunjung kembali ke website blog kita. itu lah yang dinamakan user friendly experience.
Fungsi dan Manfaat Daftar Isi Pada Website
Lalu buat apa sih fungsi tugas dan manfaat dari membuat daftar isi pada website? berikut ini fungsi dan tugas membuat daftar isi pada website:
1. Seo Friendy
web crawler atau google lebih menyukai konten yang memiliki kualitas tinggi yang terorganisir dan diformat dengan baik. Menambahkan elemen seperti list, tabel, gambar dan daftar isi adalah bagian dari upaya untuk mendapatkan peringkat pertama pada halaman hasil pencarian (SERP).
Dengang menerapkan table of content atau daftar isi pada website, Kemungkinan besar Artikel Anda akan muncul di page pertama dengan list yang ada. Jika menerapkan seo offpage dan onpage yang benar.
2. Tampilan Proffesional
Tampilan pada website akan lebih nampak proffesional dan memiliki kredibilitas. Karena website Anda mengerti kebutuhan para pembaca artikel Anda. Pastikan peletakan daftar isi itu benar, Anda bisa meletakan daftar isi diatas atau pada sidebar.
Pelatakan pada sisi atas akan memudahkan pembaca bahwa artikel mempunyai daftar isi. Jadi pembaca bisa langsung ke tujuan artikel tersebut.
3. Artikel tersistematis
Artikel tersistematis dikarenakan artikel memiliki poin-poin yang urut dan enak dibaca. Terkadang Pembaca tidak mengerti dengan artikel yang tidak ada daftar isi, karena jika pembaca lupa poin mana yang ingin dimengerti, maka akan otomatis mengulangi membaca dari awal.
4. Sebagai Sitemap Artikel
Artikel anda bisa menavigasi para pembaca untuk poin mana yang ingin dibaca, itulah fungsi sebgai sitemap artikel. Bhayangkan jika Anda ingin bepergian keluar kota, jika tidak ada map maka kita akan bingung melewati mana saja untuk sampai di kota tujuan.
Itulah kenapa daftar isi sebagai sitemap artikel.
Cara Membuat Daftar Isi Website Blog Di WordPress
Untuk Platform WordPress menggunakan plugin adalah cara yang sangat mudah sekali. Ada beberapa plugin yang bisa membuat daftar isi seperti Table of content plus, easy table of content, rich table of content dan CM table of content.
Dan kali ini saya akan menggunakan table of content plus dikarenakan user friendly dan mudah pemasangannya. Dilansir dari deskripsi plugin wordpress.com, bahwa plugin ini memberikan otomatisasi konteks index pada spesifik poin artikel.
Lebih dari itu table of content bisa membuat sitemap pada halaman dan kategori. Sekarang kita langsung ke cara membuat daftar isi website blog di WordPress:
1. Install Plugin
Silahkan install plugin terlebih dahulu agar bisa kita gunakan di artikel kita. Anda dapat menginstall plugin tersebut pada halaman plugin wordpress : https://wordpress.org/plugins/table-of-contents-plus/ .
Anda Dapat menginstall dengan cara download terlebih dahulu kemudian Anda bisa memasukan di folder plugin wordpress melalui cpanel.
Atau Anda bisa melakukan penginstallan langung melalui menu plugin -> tambah baru -> kata kunci: table of content plus
Jika sudah ketemu seperti gambar diatas, lalu Anda bisa klik install lalu aktifkan
2. Konfigurasi Plugin
Ketika plugin sudah aktif, maka Anda harus melakukan konfigurasi atau pengaturan plugin tersebut agar bisa berjalan dengan baik. pilih Pengaturan lalu klik TOC+
Setelah Anda menuju ke halaman pengaturan maka pilih main options, Disini Anda akan menentukan settingan default plugin Anda:
Dalam menu position, Anda akan mengatur letak daftar isi berada dimana:
- Before First Heading : Sebelum heading, artinya artikel Anda akan muncul sebelum heading pertama,
- After First Heading : Artinya daftar isi akan diletakan setelah heading pertama,
- Top : Meletakan daftar isi paling atas konten artikel,
- Bottom : Meletakan daftar isi paling bawah setelah konten artikel.
Menu Show When , Daftar isi akan ditampilkan jumlah minimal sub-judul, Jika memiliki kurang 3 sub-judul maka daftar isi tidak muncul.
Menu auto insert for the following content types, Jika Anda ingin menampilkan daftar isi di semua artikel dan halaman, maka centang post dan page.
jika tidak maka tidak mencentang post dan page. Maka daftar isi tidak otomatis masuk ke Artikel. kita harus memasukan daftar isi dengan cara manual nantinya.
Ketika akan menampilkan artikel yang ingin dengan daftar isi, bisa menggunakan shortcode pada editor wordpress Anda. Dan sebaliknya ketika Anda mencentang dan tidak ingin menampilkan maka masukan shortcode .
Setelah itu Anda bisa menuju ke menu selanjutnya seperti pada gambar dibawah ini:
Didalam gambar tersebut ada beberapa menu:
- Heading Text : Anda bisa membuat judul pada daftar isi tersebut, disini kami menggunakan ‘daftar isi’. Centang pada bagian Allow the user to toggle the visibility of the table of contents,
- Show Hierarchy : Menampilkan hierarky daftar isi pada artikel,
- Number List Items : Menampilkan list seperti Angka atau list bullat pada daftar isi.
3. Mengatur Tampilan Daftar Isi
Di menu ini Anda bisa mengatur desain atau tampilan pada daftar isi.
- Width : Mengatur panjang dari daftar isi,
- Wrapping : Mengatur posisi dari daftar isi,
- Font Size : Mengatur besar kecilnya huruf daftar isi,
- Presentation : Mengatur Thema dari daftar isi.
Selesai, pada tahap ini anda berhasil cara membuat daftar isi website blog di wordpress.
Cara Membuat Daftar Isi Website Blog di Blogspot Blogger
Ini untuk Anda Cara membuat daftar isi website blog pada blogspot. Sekarang masih banyak yang menggunakan blogspot untuk ngeblog. Berikut caranya :
1. Login Blogger.com
Jika Anda sudah mempunya blogger, Anda bisa login terlebih dahulu di blogger Anda. dan jika belum Anda bisa membuat blogger terlebih dahulu. dibawah ini caranya :
Baca Juga : Cara Membuat Blog WordPress dan Blogger
2. Buat Artikel
Setelah itu Anda bisa membuat artikel baru seperti biasanya. Kemudian buat Sub-Judul dan tambahkan beberapa paragraf dibawahnya :
kemudian klik HTML, lalu perhatikan isi html tersebut:
ada sebuah tag: id di setiap judul sub-heading, hafalkan setiap id dari per sub-judul. Kemudian jika sudah Anda dapat menambahkan langsung kode berikut pada baris paling atas.
<h3>Daftar Isi</h3> <div> <ul> <li><a href="#judul1">Judul 1</a></li> <li><a href="#judul2">Judul 2</a></li> </ul> </div>
3. Selesai
Isikan id judul setelah kode hashtag ‘#‘ , dan selamat Anda berhasil membuat Daftar isi pada artikel. ini berlaku untuk per artikel ya. Dan jika ingin memasukan daftar isi ke semua artikel anda bisa membaca dibagian bawah ini.
Cara Membuat Daftar Isi Website Blog Pada Thema Blogger
Jika cara di atas adalah untuk per artikel, maka kami akan sajikan juga cara membuat daftar isi website blog pada blogger di semua artikel.
1. Masuk Ke Blogger
Tentunya langkah yang pertama adalah Anda harus login ke akun blogger Anda. Ketika sudah login ke blogger Anda harus mempunyai thema dan artikel yang sudah ada. Agar bisa melihat hasilnya.
2. Konfigurasi Thema Blogger
Selanjutnya setelah Anda login ke blogger, Anda harus masuk ke menu Tema lalu klik Edit HTML. Kemudian Copy paste kode CSS Daftar Isi untuk Blogger di atas kode ]]</b:skin> , berikut kodenya:
.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;}
Langkah selanjutnya Copy Paste JS Table Of Content untuk blogger di atas kode </head>, Berikut ini code JS nya :
<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>
Lalu tambahkan link Font Awesome di Blogger Anda, letakan pula diatas kode </head> ,
<link href=’http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css’ rel=’stylesheet’/>
Lakukan pencarian dan penggantian kode <data:post.body/> posting (biasanya kode ke 2), ganti dengan kode ini :
<div id=’post-toc’><data:post.body/></div>
Setelah memasukan kode-kode diatas maka save atau simpan template , Selamat Anda telah berhasil membuat daftar isi pada seluruh artikel blogger Anda.
3. Memasukan TOC ke Artikel
Untuk memasukan TOC Anda harus memiliki minimal 2 sub judul dengan heading H3. Copy paste kode berikut pada alenia pertama atau sebelum heading :
<div class=”mbtTOC”>
<button onclick=”mbtToggle()”>Daftar Isi</button>
<ol id=”mbtTOC”></ol>
</div>
Ganti tulisan “daftar isi” sesuka kamu. Kemudian copy paste kode berikut di akhir postingan:
<script>mbtTOC();</script>
4. Selesai
Nah sampai sini Anda sudah memiliki daftar isi di setiap artikel di blogger.
Penutup
Demikian lah cara membuat daftar isi website blog dengan mudah. Anda tidak perlu jago koding untuk membuat daftar isi pada website blog. Semoga bermanfaat, dan silahkan berkomentar jika ingin request ataupun yang lainnya. Salam ngeblog- Akmazona.com
https://akmatech.co.id