Tutorial Cara Membuat Daftar Isi di Blog dengan Scroll

Cara membuat daftar isi di blog dengan scroll atau tidak sebenarnya hampir mirip, namun daftar isi yang dihasilkan sedikit memiliki perbedaan. Daftar ini yang menggunakan scroll akan lebih menghemat space dari pada yang tidak menggunakan scroll.

Namun, tidak mengurangi fungsi dari daftar isi itu sendiri, yakni memberikan gambaran garis pembahasan dari artikel dengan lengkap sehingga akan memudahkan menemukan informasi yang mereka butuhkan.

Begini Cara Membuat Daftar Isi di Blog dengan Scroll

Untuk bisa membuat daftar isi dengan menggunakan scroll, Anda bisa mengikuti beberapa langkah berikut ini:

1. Langkah pertama yang harus Anda lakukan adalah membuka dashboard blog yang Anda gunakan.
2. Jika sudah, silahkan buka menu laman kemudian halaman baru dan pilih HTML.
3. Kemudian masukkan kode berikut ini pada halaman HTML milik Anda.

<div style=”background-color: none; height: 600px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;”>

<script src=”http://bloggergubug.googlecode.com/files/daftarisi.js”></script><script src=”http://nama-website-anda.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc”></script></div>

4. Cara membuat daftar isi di blog dengan scroll selanjutnya gunakan kode berikut ini:

<div style=”background-color: white; border: 1px solid #ddd; height: 100px; margin: 0px 0px 0px 0px; overflow: auto; padding: 3px; width: 300px;”>

<div class=”border”>

1. <a href=”http://Contoh.html” title=”Langkah Memulai Blog Baru”>Langkah Memulai Blog Baru</a> </div>

<div class=”border”>

2. <a href=”http://contoh.html” title=”Mengenal Tampilan Blogger Terbaru”>Mengenal Tampilan Blogger Terbaru</a> </div>

<div class=”border”>

3. <a href=”http://contoh.html” title=”Alasan Menggunakan Blogspot Untuk Blog”>Alasan Menggunakan Blogspot Untuk Blog</a> </div>

<div class=”border”>

4. <a href=”http://contoh.html” title=”Cara Memulai Postingan Baru di Blogspot”>Cara Memulai Postingan Baru di Blogspot</a> </div>

<div class=”border”>

5. <a href=”http://contoh.html” title=”Cara Mengganti Template Blog Pada Blogspot”>Cara Mengganti Template Blog Pada Blogspot</a> </div>

<div class=”border”>

6. <a href=”http://contoh.html” title=”Cara Memasukkan dan Edit Gambar di Blog”>Cara Memasukkan dan Edit Gambar di Blog</a> </div>

</div>

5. Pada tulisan yang di-bold diganti dengan link/ URL blog Anda.
6. Akhiri dengan klik publish untuk diterapkan di blog Anda.

Selain cara di atas, ada juga cara membuat daftar isi di blog dengan scroll lainnya, dengan cara berikut ini:

1. Buka website/ blog yang Anda gunakan.
2. Kemudian buka tata letak atau dashboard blog.
3. Tambahkan gadget atau widget. Sesuai dengan platform yang Anda gunakan.
4. Jika sudah lanjutkan dengan klik menu HTML atau Teks.
5. Lalu, masukkan kode berikut ini

<h2>Daftar Isi</h2>

<div>

<div style=”overflow:auto;width:280px;height:150px;border:1px solid #cccccc;padding:10px;”>

[…..]

</div></div>

Selain Anda bisa dengan cara membuat daftar isi di blog dengan scroll Anda juga bisa menggunakan cara yang lebih sederhana dan tidak perlu melakukan coding dan sejenisnya.

Membuat Daftar Isi dengan Plugin WordPress

Ada cara mudah lainnya yang bisa Anda gunakan untuk membuat daftar isi di blog yang Anda miliki, tanpa mengurangi fungsi dari daftar itu sendiri, dengan memanfaatkan plugin yang disediakan oleh WordPress.

Hal ini bisa menjadi solusi bagi Anda yang merasa kesulitan dengan cara membuat daftar isi di blog dengan scroll sebelumnya. Berikut cara membuat isi dengan plugin WordPress:

1.      Pilih dan Instal Plugin Daftar Isi

Langkah pertama yang perlu Anda lakukan adalah menginstal salah satu dari plugin daftar isi yang ada di WordPress.

Untuk memilih Plugin Anda hanya perlu mengunjungi menu Plugin dari Dashboard, kemudian tambahkan plugin, maka datar plugin akan muncul di layar kalian.

Dan cari plugin daftar isi/ table of content dan pilih mana yang paling bagus dan kompatibel dengan blog kalian dan instal pada menu yang disediakan.

2.      Lakukan Konfigurasi Daftar Isi Dengan WordPress

Jika kalian sudah menginstal plugin daftar isi, langkah selanjutnya adalah melakukan konfigurasi dasar plugin agar bisa beroperasi secara optimal.

Jika Cara membuat daftar isi di blog dengan scroll kalian tidak perlu melakukan konfigurasi berbeda dengan menggunakan plugin.

Untuk melakukan konfigurasi ini, cukup ikuti beberapa langkah berikut ini:

• Pertama, Anda buka dashboard dan pilih menu Setting kemudian menu TOC+
• Jika sudah, maka buka menu Tab Main Option untuk melakukan peraturan posisi, jumlah baris hingga halaman post.
• Menu Position, berfungsi untuk mengatur dimana daftar ini berada nantinya di artikel
• Menu Show When, berfungsi untuk menampilkan seberapa banyak nantinya sub judul yang akan ditampilkan (sesuai dengan artikel Anda nantinya)
• Menu terakhir, untuk menentukan bentuk tampilan dari daftar isi. Untuk ini, Anda cukup centang pada bagian Post dan Page saja.
• Cara membuat daftar isi di blog dengan scroll selanjutnya lakukan pengeditan pada bagian heading text dan sejenisnya.
• Bagian Header Text untuk memberi nama daftar isi, Anda bisa mengubahnya sesuai keinginan.
• Bagian Show Hierarchy, digunakan untuk mengatur penampilan dan urutan hirarki dari daftar ini yang akan ditampilkan nantinya.
• Kemudian Number List Items, mengatur penomoran pada daftar ini yang akan ditampilkan.
• Klik centang Enable Smooth Scroll Effect jika Anda menginginkan untuk berhenti pada bagian sub judul ketika di klik.
• Atur semua sesuai dengan kebutuhan blog yang Anda gunakan, pastikan untuk tetap rapi dan terlihat profesional agar tidak mengganggu tampilan dari artikel nantinya.

3.      Edit Tampilan dari Daftar Isi

Langkah terakhir adalah mengedit tampilan dari daftar isi, pengaturan ini juga cukup sederhana, semua bisa Anda sesuaikan dengan kebutuhan dan tampilan dari blog milik Anda.

Ada beberapa hal yang perlu dipahami agar proses edit tampilan ini bisa berjalan lebih lancar.

• Istilah Width, digunakan untuk mengatur seberapa lebar daftar isi yang akan Anda tampilkan nantinya.
• Menu Wrapping, digunakan untuk mengatur di posisi mana daftar isi ini akan ditampilkan.
• Font Size, menu ini digunakan untuk mengatur seberapa besar dan kecil huruf dari daftar isi. Untuk mengatur ini pastikan ukuran daftar isi tidak terlalu kecil dan tidak terlalu besar jika di bandingkan dengan ukuran huruf pada artikel.
• Presentation, untuk mengatur secara keseluruhan bagaimana penampilan daftar isi yang akan di tampilan pada blog.

Cara Menonaktifkan Daftar Isi Jika Tidak Dibutuhkan.

Jika Anda merasa daftar isi tidak lagi perlu digunakan dalam blog Anda, atau hanya sekedar menonaktifkan Anda perlu melakukan beberapa cara berikut ini.

Cara ini tidak membutuhkan coding dan bisa dilakukan baik cara membuat daftar isi di blog dengan scroll atau tidak.

1. Pertama silahkan buka dashboard blog Anda jika Anda menggunakan WordPress.
2. Kemudian buka menu tampilan dan pilih widgets dan buka widgets TOC+ lalu non aktifkan daftar isi.
3. Caranya centang Show of table contents only in the sidebar, yang akan membuat daftar isi hanya tampil di side bari tidak pada isi konten.

Sekian informasi tentang cara membuat daftar isi di blog dengan scroll dan cara lainnya, semua bisa Anda gunakan sesuai dengan kebutuhan blog Anda.