The-Bhuz.Com: Membuat halaman Daftar Isi Dengan Jquery

Membuat halaman Daftar Isi Dengan Jquery

Posted by under Bloger, Tutorial

Membuat halaman Daftar Isi Dengan Jquery

Kali ini akan saya bahas cara memasang / membuat daftar isi dengan jQuery. Penampilan sitemap atau daftar isi jquery accordion ini sangat bagus dan keren sekali serta mempunyai link bergoyang ketika disorot cursor mouse. Dibawah ini dapat anda lihat screenshot dari daftar isi menggunakan efek / animasi accordion. Bagaimana menurut anda, keren bukan?

Daftar Isi Dengan Jquery mempunyai kelebihan dalam meringkas / membuat irit ruang blog, jadi tidak akan memanjang sampai kebawah. Dengan begitu apabila artikel / postingan anda sudah melebihi 1000 artikel, apabila tidak dipasang daftar isi dengan scroll atau daftar isi dengan menggunakan jquery accordion, pasti akan memanjang ke bawah.

Cara Membuat halaman Daftar Isi Dengan Jquery :

Login ke blogger anda
Pada dasbor masuk ke Template => pilih Edit HTML.
Backup dulu template anda
Centang kotak Expand Widget Template
Tekan F3 dan cari kode ]]></b:skin> lalu letakkan kode berikut diatasnya

#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); }

Lalu cari kode </head> dan letakkan kode berikut diatasnya

Keterangan : Apabila didalam template anda sudah terpasang kode script jQuery, maka tidak perlu lagi dipasang didalam template.

Simpan / Save Template
Selanjutnya anda buat postingan baru dengan judul daftar isi atau sitemap di blog anda dan pasang atau masukkan kode dibawah ini dalam posisi / mode HTML (bukan compose) setelah itu publikasikan.

Keterangan : Ganti url blog saya dengan url blog anda

Selamat Mencoba sobat

Terimakasih sudah Berkunjung, jangan Lupa Meninggalkan komentar

Posted by : The-Bhuz.Com http://visitors2cash.com/ref.php?refId=127284

Artikel Membuat halaman Daftar Isi Dengan Jquery diposting oleh The-Bhuz.Com . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan melalui kotak komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog Sobat, hanya saja mohon sertakan link sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Selamat bersenang-senang.

a href="http://the-bhuz.blogspot.com/2013/06/membuat-halaman-daftar-isi-dengan-jquery.html" target="_blank">Membuat halaman Daftar Isi Dengan Jquery