Minggu, 19 Mei 2013

Cara Membuat Daftar Isi Dengan Scroll Di Blog


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.

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 :
<div style="background-color: none; border: 1px solid #CCC; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;">
<div align="center">
<span style="font-size: medium;">Daftar Isi</span></div>
<script src="http://data-file.xtgem.com/javascript/scroll.js"> </script><script src="http://zundaime.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div>
Kemudian paste di Tata Letak > Tambahkan Gadget > HTML/JavaScript.
Jangan lupa mengganti nama blog saya zundaime.blogspot.com dengan nama blog sobat blogger sendiri.
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. Semoga bermanfaat!

Artikel Terkait

0   komentar

Posting Komentar

Cancel Reply

Pengikut