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...
  • Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

    Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

    Artikel relevan lainnya
    Beri Komentar