Dapatkan Promo Online terbaik. Dapatkan Sekarang!

Membuat 'Daftar Isi' Simple dan Keren di Blog

Cara membuat halaman daftar isi di blog dengan json script yang keren dan fleksibel dengan berbagai browser
Daftar isi merupakan sebuah bagian penting dalam sebuah blog. Ibarat buku, blog juga memerlukan daftar isi agar pembacanya bisa mengetahui apa saja yang ada dalam blog yang dikunjunginya. Untuk itu para blogger sudah sepatutnya mengetahui bagaimana cara menyisipkan daftar isi pada blognya.

Sharing kali ini Diza ingin berbagi tentang cara membuat halaman daftar isi yang simple, ringan dan keren. Nah, tak perlu banyak intermezo, langsung saja kita ke step-step pembuatan halaman daftar isi ini.


  1. Login Blogger terlebih dahulu
  2. Klik "Laman", kalau pakai blog bahasa inggris, klik "Pages".
  3. Pilih "Laman Baru", Klik! Selanjutnya akan muncul kotak editor seperti ketika membuat posting blog. Hanya saja tampilannya lebih sederhana. Berikut tampilannya:editor laman
  4. Pada kotak isian untuk judul, masukkan judul sesuai keinginan. Misal: "Daftar Isi Blog"
  5. Kemudian, pindah ke kotak isian halaman.
    Paste script berikut:

    <div style="padding:0px 0px 0px 30px; background:none; "><script src="https://cdn.rawgit.com/ediissetiawan/DizaSharedScript/d9ca1fb1/daftar-isi-keren-ds.js"></script><script src="https://dizashared.web.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  6. Selesai. Jangan lupa ganti alamat/URL dizashared.web.id dengan alamat/URL blogmu. Kemudian klik tombol "Publikasikan".
Jika ingin sedikit berkreasi dengan tampilan Daftar isinya, kamu bisa melakukan editing pada kode yang Diza beri warna Biru dan Merah. Misalkan ingin merubah background daftar isi berwarna merah, maka ganti 'none' dengan #FF0000


Nah, kalau untuk tampilan tanpa editing script (kode) pada blog kurang lebih hasilnya seperti ini:
tampilan daftar isi

Daftar isi akan ditampilkan urut secara Alfabetis. Diurut dari label hingga judul postingnya.

Cukup sekian posting kali ini, semoga bermanfaat. Terima kasih...

Posting Komentar

Berkomentarlah dengan baik, karena komentar yang baik bisa membuat DizaShared lebih baik lagi. ^_^'
NextGen Digital Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...