Membuat/Modifikasi Daftar Isi/Sitemap dengan J Accordion

Daftar isi atau table of content yang biasa kita sebut dengan sitemap, merupakan salah satu fasilitas penting dan sangat berguna, terutama bagi para pengunjung blog agar lebih mudah menelusuri/memetekan seluruh isi/konten suatu blog.

Salah satu cara untuk membuat/memodifikasi daftar isi/sitemap yaitu dengan efek jquery accordion. Pengen tahu seperti apa hasilnya klik aja gambar di bawah ini.

Cara Membuat Daftar Isi/Sitemap

  • Buka Dasbor > Edit HTML > jangan lupa download terlebih dahulu template anda.
  • Kemudian cari kode  

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Apabila template anda sudah memiliki kode di atas atau versi berapa saja maka tidak perlu ditambahkan silahkan tutup kembali.
  • Apabila template anda belum memiliki kode di atas maka tambahkan lah tepat sebelum kode  </head>

Selanjutnya buatlah sebuah halaman baru atau postingan baru.

  • Berikan judul dengan judul Daftar isi, sitemap atau terserah anda deh.
  • Pastekan script dibawah ini pada kolom HTML yang berada di samping Compose lalu ganti URL blog yang berwarna MERAH dengan URL blog/WEB sobat.


<link href="http://info-kmu.blogspot.com/"></link>
<script src="http://my-p4bk.googlecode.com/svn/trunk/daftarisiv2-pack.js"></script>
<script src="http://info-kmu.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">var accToc=true;</script>
<script src="http://my-p4bk.googlecode.com/svn/trunk/accordion-pack.js"  type="text/javascript"></script>
<style type="text/css">
.judul-label{background-color:#700999;font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Calibri;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background: #700999;background: -webkit-gradient(linear, left top, left bottom, from(#050404), to(#575757));background: -moz-linear-gradient(top,  #888,  #575757);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');}
.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px;white-space:nowrap;text-align:left;font-family:"Arial",sans-serif;font-size:12px;}
.list-ganjil{background-color:#F6F6F6;}
.headactive{ color: #fef4e9;border: 2px solid white !important;background: #f78d1d;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#86407E));background: -moz-linear-gradient(top,  #faa51a,  #f47a20);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');}
</style>
  • Kemudian Pratinjau dan Publikasikan...
  • 4 Responses to "Membuat/Modifikasi Daftar Isi/Sitemap dengan J Accordion"

    1. mantap sekali gan baru tahu saya bisa bikin sitemap

      BalasHapus
    2. Balasan
      1. Terima kasih sudah berkunjung...semoga bermanfaat...

        Hapus
    3. Thanks mas.. sudah di coba nih , coba deh liat :)

      BalasHapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel