Cara Membuat Daftar Isi dengan JQuery

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Membuat Daftar Isi dengan JQuery dan semoga artikel ini bermanfaat.

---

Belajar Internet Melalui Komputer kali ini akan berbagi pada teman-teman Cara membuat daftar isi dengan JQuery. Daftar isi sangat dibutuhkan karena dengan daftar isi dapat membuat pencarian lebih mudah dan efisien selain itu dengan adanya daftar isi juga dapat membuat blog kita semakin profesional. Selain itu Dipilihnya efek animasi accordion pada daftar isi dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang
sekaligus mudah dan rapi untuk blog serta artikel yang di susun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Ok untuk Membuat Daftar Isi Blog Dengan Efek jQuery Accordion ikuti saja langkah-langkah berikut ini...

1.Log in dulu ke account blog anda
2.Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
3.Setelah itu cari kode berikut ini ]]></b:skin>
4.Kemudian copas kode dibawah ini dan taruh diatasnya.

 #dafis-acc{
    font-family: Tahoma ;
    font-size:11px;
    color:#333;
    background:#ffffff;
    }
    .dafis-label {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1hFRiYQmKxW8AoMTDpx77mh2BM3RBezC1bch51akvNCzyM6U4OGf5oBQr2aFySYKrOnSU0F1GV52H4-wv7Pw_54AoqLaSBrXo-O_q62rQmbNjxCMrlqpsIkA3EnoxQcrbW6ePkTU0aRI/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
    border: 1px solid #2F94BA;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    line-height: 1.4em;
    margin: 1px 3px;
    outline: medium none;
    overflow: hidden;
    padding: 2px 10px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
    white-space: nowrap;
    }
    .dafis-label:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-q-Mzxzz2JoCLhw97uWjSxhSGnzZOIzJdpUn4rMQkapAh2U6DTeeh3zTlzkk1uL2jK2JByGkLjJ2XaTI-NPGU0sITMSgvTs_YPYPahKC9bS1qsrvmkaqQHrXCcoqoSjx6HVQN5kiH5sc/d/bg2.gif") repeat-x scroll 0 0 #E1F4FB;
    color: #003366;
    }
    .dafis-daf ol {
    margin: 0 0 0 30px !important;
    padding: 0 !important;
    }
    .dafis-daf ol li {
    background-color: #C9E9F4;
    border: 1px solid #339DC6;
    line-height: 1.5em;
    margin: 1px 3px !important;
    text-align: left;
    white-space: nowrap;
    }
    .dafis-daf ol li a {
    color: #333333 !important;
    display: block;
    padding-left: 10px;
    text-decoration: none !important;
    }
    .dafis-daf ol li a:hover {
    background: none repeat scroll 0 0 #7BC4DF;
    border-left: 5px solid #333333;
    padding-left: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    }

5.Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Keterangan : Jika sebelumnya sobat telah memasang scipt jQuery maka cara ini lewati saja langkah diatas

6.Kemudian Klik Simpan Template.

Langkah Selanjutnya
1.Buatlah sebuah posting blog dengan judul terserah Misal : Daftar Isi Blog Lengkap Atau Table Of Content.
2.Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.

Ubah namablogsobat dengan nama blog anda

<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="namablogsobat/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

3.Selanjutnya Klik Terbitkan.

Alhamdullilah Selesai juga ...... Dengan ini blog anda mempunyai daftar isi atau table of content, semoga dengan adanya daftar isi atau table of content dapat membuat pengunjung blog betah berkunjung ke blog teman.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Membuat Daftar Isi dengan JQuery kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 19:51