May 20, 2012

Cara membuat daftar isi Scroll dan Accordion Style

Daftar isi atau dalam bahasa Inggris biasa disebut Table of contents adalah sebuah fitur untuk memudahkan pengunjung mengeksplorasi isi sebuah blog, aagar pengunjung bisa mengetahui seluruh isi postingan sebuah blog. Tak sedikit blogger menyamakan istilah daftar isi dengan sitemap, padahal jelas berbeda. Daftar isi biasanya ada yang berdasarkan label atau kategori ada juga yang berdasarkan tanggal publikasi artikel.

Pada kesempatan ini saya akan berbagi tutorial bagaimana cara membuat daftar isi dengan scroll dan daftar isi dengan menu efek accordion jquery. Jika dengan scroll atau tombol gulir menampilkan isi berdasarkan tanggal posting maka daftar isi efek accordion adalah per label.

A. Membuat daftar isi sederhana dengan Scroll atau tombol gulir


Daftar isi dengan scroll ini tampilannya sangat sederhana dan tidak begitu banyak berat loadingnya. Menampilkan arsip atau isi blog berdasarkan tanggal dan bulan posting artikel. Cara membuatnya cukup mudah, bisa sobat masukkan di halaman statis, postingan, sidebar atau footer sekalipun. Khusus di halaman statis dan postingan harus masuk ke menu HTML (bukan compose). Silakan sobat copy kode berikut ini:




Jangan lupa mengganti nama blog saya www.super-gaptek.com dengan nama blog sobat blogger sendiri. Silahkan masukkan/ paste di sidebar atau footer.


Catatan;
  • Untuk mengurangi atau menambah ukuran tinggi lihat angka 400px silakan dimodifikasi
  • Sedangkan untuk lebar kotak daftar isi ditunjukkan dengan angka 95% jadikan 100% atau dikurangi.
  • Kata Daftar Isi bisa sobat ganti juga
Oke sobat, saya kira cukup mudah silakan lihat demonya di sini.

B. Cara membuat daftar isi keren efek accordion style

 

Sebelum sobat memakai atau mempraktekkan nya sobat bisa melihat contoh demonya di Daftar Isi
Bagaimana, bagus tidak, hehehe. hemat tempat karena begitu satu label dibuka secara otomatis label atau artikel lain akan menutup sendiri. Kalau sobat mau menggunakan silakan ikuti tutorial di bawah ini.

1. Langkah pertama yaitu menambahkan kode css ke template blog.
cari kode  ]]></b:skin> kemudian masukkan kode css di bawah ini tepat di atas kode ]]></b:skin> tadi.



2. Memasang kode javascript / jquery. Cari kode </head> kemudian masukkan kode berikut ini di atasnya.


Jika ditemplate blog sudah ada kode tadi tidak perlu lagi memasukkannya.Terakhir simpan template.  3. Langkah ke tiga yaitu memasang kode berikut boleh di postingan blog atau di static page (halaman statis)
silakan masukkan / gunakan  menu HTML pada saat menulis artikel. Jangan lupa untuk mengganti www.blogbelajar2.blogspot.com dengan nama blog sobat sendiri. Kemudian publikasikan. Dan daftar isi keren dengan accordion style pun sudah jadi. 


Sobat blogspotter mau pakai yang mana yang pertama atau kedua, dipersilahkan, hehehe.

8 comments:

  1. nanya gan,.. accordion bisa ga' pakai autoheight? mksih...

    ReplyDelete
  2. bagus sekali untuk belajar, trma ksh gan

    ReplyDelete
  3. Coba cek tampilan daftar isi di blog ane..
    ada yg lebih keren gan..
    salam kenal..

    ReplyDelete
  4. wah makasih nih gan, langsung coba di di glob ane..

    ReplyDelete
  5. makasih gan, atas infonya..
    keren tuh yg css.

    ReplyDelete
  6. mf gan mw nanya halaman statis itu apa??...

    *newbie*

    ReplyDelete
  7. Keren & Bermanfaat bnget...., makasih... :)

    ReplyDelete
  8. makasih info scriptnya, langsung di sedot

    ReplyDelete

Anda harus menjadi follower blog ini jika ingin memberikan komentar. Terima Kasih