Membuat Daftar Isi Blog Manual dengan Scroll

Sumber gambar : www.allecreeative.com

   Setelah posting saya yang sebelumnya tentang cara membuat daftar isi blog berdasarkan label, kali ini saatnya saya post membuat daftar isi dalam versi yang lain.

   Dari judul post di atas, sepertinya Anda sudah tau apa yang akan dibuat kali ini. Sama seperti daftar isi versi berdasarkan label, daftar isi manual ini juga bisa dipasang pada halaman blog atau pun pada widget, tinggal Anda lebih memilih yang mana.

Langsung saja, jika ingin memasukkan di halaman tersendiri,

1. Login ke Blogger

2. Pilih Buat Entri Baru, atau bisa juga buat di halaman Statis (Static Page).

Sumber gambar : dokumen pribadi

3. Masukkan kode di bawah ini pada post yang akan Anda buat dengan mode HTML.

Sumber gambar : dokumen pribadi

<div style="background-color: transparent; border: 1px solid rgb(221, 221, 221); height: 500px; margin: 0px; overflow: auto; padding: 3px; width: 300px;">
<div class="border">
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-size: medium;">1. <a href="http://www.URLAnda.com/artikelpertama" style="font-weight: normal;">Artikel Pertama</a></span><span style="font-weight: normal;"><span style="font-size: 20px;">&nbsp;</span></span></span>
<span style="font-family: Verdana, sans-serif;"><span style="color: black; font-size: medium; font-weight: normal;"> 2. </span><span style="color: black; font-size: medium;"><a href="http://www.URLAnda.com/artikelKedua" style="font-weight: normal;">Artikel Kedua</a></span><span style="color: black; font-size: medium; font-weight: normal;">&nbsp;</span><span style="color: black; font-size: medium;"><br style="font-weight: normal;" /></span></span></div>
</div>

4. Setelah di paste, kemudian berpindahlah ke mode Compose, jika masih ada yang kurang seperti spasi, enter, warna font, atau ukuran font bisa Anda atur pada mode ini (Compose).

5. Klik Publish.

6. Maka tampilannya akan seperti screenshot di bawah ini.

Sumber gambar : dokumen pribadi

      Scroll belum mulai muncul karena daftar isi yang ada belum melebihi tinggi yang dibuat dalam kode HTML tadi.

   Jika Anda ingin menaruhnya di Widget, langkahnya sama seperti yang sudah saya post sebelumnya. Tapi, daripada reot - repot Anda saya kasih link, lebih baik saya langsung tulis saja di bawah.

1. Login ke Blogger.
2. Masuk ke Tata Letak.

Sumber gambar : dokumen pribadi

3. Pilih Tambahkan Gadget.
4. Pada jendela baru yang muncul pilihlah HTML/Javascript.

Sumber gambar : dokumen pribadi

5. Masukkan kode html/javascript berwarna hijau di atas lalu Simpan.

   Keterangan kode HTML:
a. Warna Hijau : Kode yang harus Anda masukkan secara lengkap
b. Warna Kuning : Kode ini dapat diganti sesuai keinginan Anda
c. Warna Fuschia (ditambah kode Warna Kuning di tengahnya) : Kode ini adalah kode yang menciptakan nomor 2 pada tampilan yang saya screenshot kan tadi. Jadi, jika Anda ingin menambahkan nomor baru, kopi paste kode Fuschia tadi lalu paste tepat sebelum kode yang ditandai hijau (mode HTML).

Semoga berhasil... :-)