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:
<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://julak-project.googlecode.com/files/dafisiscroll%20.js"> </script><script src="http://www.be2saudara.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div>
Jangan lupa mengganti nama blog saya www.be2saudara.blogspot.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
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.
cari kode ]]></b:skin> kemudian masukkan kode css di bawah ini tepat di atas kode]]></b:skin> tadi.
debby
#dafis-acc {font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;font-size:14px;}.dafis-label {background: rgb(125,126,125);background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;color: #A1A1A1;text-transform:uppercase;font-weight: bold;line-height: 2em;margin: 1px 3px;cursor: pointer;outline: medium none;overflow: hidden;padding: 2px 10px;text-decoration: none;text-align: center;}.dafis-label:hover {color: #F2F2F2;}.dafis-daf ol {margin: 0 0 0 30px !important;padding: 0 !important;}.dafis-daf ol li {background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );-webkit-border-radius: 25px;-moz-border-radius: 25px;border-radius: 25px;line-height: 1.3em;margin: 1px 3px !important;text-align: left;white-space: nowrap;}.dafis-daf ol li a {color: #333333 !important;display: block;padding-top:5px;padding-left: 10px;text-decoration: none !important;}.dafis-daf ol li a:hover {color:f2f2f2;padding-left: 5px;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
2. Memasang kode javascript / jquery. Cari kode </head> kemudian masukkan kode berikut ini di atasnya.
Terakhir simpan template.
3. Langkah ke tiga yaitu memasang kode berikut boleh di postingan blog atau di static page (halaman statis)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
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)
<script src="http://julak-project.googlecode.com/files/daftar%20isi.js" type="text/javascript"></script><script src="http://www.ber2saudara.blogspot.com.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
silakan masukkan / gunakan menu HTML pada saat menulis artikel. Jangan lupa untuk mengganti www.ber2saudara.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.
sumber : http://ber2saudara.blogspot.com/2012/11/cara-membuat-daftar-isi-keren-di-blogger.html
0 komentar:
Posting Komentar