mas template

Membuat Daftar Isi Dengan jQuery Accordion

Daftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. Setelah sebelumnya saya sudah membahas tentang cara membuat daftar isi manual dan otomatis, kali ini saya akan berikan satu lagi cara membuat daftar isi, tapi kali ini beda karena menggunakan jQuery dan hasilnya nanti akan lebih keren.

Selain itu daftar isi yang saya bahas disini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Nah, untuk contoh soalnya temen-temen bisa lihat gambar di bawah atau langsung klik disini.


Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya :

Langkah Pertama
  1. Login dulu ke blogger 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:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#333;
    background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;
    padding:2px 0;
    border:1px solid #339DC6;
    }
    .dafis-label{
    background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
    font-weight:bold;
    line-height:1.4em;
    overflow:hidden;
    white-space:nowrap;
    vertical-align: baseline;
    margin: 1px 3px;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    padding: 2px 10px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    border:1px solid #2F94BA;
    }
    .dafis-label:hover{
    background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/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;
    line-height:1.5em;
    margin:1px 3px !important;
    white-space:nowrap;
    text-align:left;
    border:1px solid #339DC6;
    }
    .dafis-daf ol li a{
    text-decoration: none !important;
    color:#333 !important;
    display:block;
    padding-left:10px;
    }
    .dafis-daf ol li a:hover{
    background: #7BC4DF;
    border-left: 5px #333 solid;
    padding-left: 5px;
    text-shadow: 0 1px 1px rgba(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'/>
    
  6. Nb : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas
  7. Kemudian Klik Simpan Template.
Langkah Kedua
  1. Buatlah sebuah posting blog dengan judul terserah (Misalnya : 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.
    <script type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js"></script>
    <script src="http://namablogsobat.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
  3. Ubah namablogsobat dengan url blog anda
  4. Selanjutnya Klik Publish Post.
Itu tadi tutorial kali ini, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

31 comments:

  1. saat jalan2 cari info daftar isi.. yg di sini menarik saya... saya coba gan...: nih cek www.kliktujuh.blogspot.com

    ReplyDelete
  2. @Lulus gita:
    Nggak usah udah otomatis..

    ReplyDelete
  3. Thankz kang hehe coba dulu achhh

    ReplyDelete
  4. sampai langkah kedua gagal "HTML Anda tidak bisa diterima: Tag putus: SCRIPT"

    tolong dikoreksi

    ReplyDelete
  5. gan , dr coment diatas ktnya langkah kedua ada yang gagal ?

    tolong diperjelas gan ...
    saya jd ragu mau nyoba

    thnx

    ReplyDelete
  6. gan saya udah coba menu popular postnya, tapi kenapa ya masih terkesan kurang rapi, dan setelah masuk menu readmore popular postnya acak acakan, mohon dibalas langsung di blog saya www.akangsurya.blogspot.com

    ReplyDelete
  7. Assalamualaikum,
    wah terimakasih banyak y mas udah mau berbagi ilmu, jujur saya merasa sangat terbntu, dan saya berniat untuk belajar banyak dari mas... :)


    terimakasih banyak ilmunya. sukses selalu mas.

    ReplyDelete
  8. Mas Langkah kedua ada kesalahan

    Pesan 1. HTML Anda tidak bisa diterima: Tag penutup tidak memiliki tag pembuka pasangannya: SCRIPT

    Pesan 2. HTML Anda tidak bisa diterima: Tag putus: SCRIPT SRC="

    ReplyDelete
  9. mas nggak bisa :( padahal keren tapi gabisa di pasang :(

    ReplyDelete
  10. wah patutut dicoba tuh mas...thanks

    Makalah Kita semua
    http://makalahkitasemua.blogspot.com/

    ReplyDelete
  11. https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js nya udah ga ada lagi mas,
    mohon di bikin ulang donk

    ReplyDelete
  12. https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js script nya udah mati mas jadi ga nongol

    ReplyDelete
  13. mantap nih.

    kubjungi blog ane mas.

    http://inimovies.blogspot.com

    Terima kasih

    ReplyDelete
  14. mas ane asli gaptek nih gi belajar blogg

    misal ane bikin artikel tentang 1.tutorial blog 2.cara edit blog 3. dsb . 4 panduan WP, 5. cara buat blog WP pengen masuk semua ke misal untuk (1,2,3 )menu TUTORIAL BLOG dan Untuk (5,6) misal Menu WORDPRESS gimana caranya mohon yg lain juga bisa bantu ane

    ReplyDelete
  15. MAKASIH YAH ATAS RESEPNYA...HEHEHE

    ReplyDelete
  16. Wah interaktif banget penampilan sitemap nya mas. Mau saya pake dlu ah.. :D

    ReplyDelete
  17. Produk dijamin asli
    TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    Dijual

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock !
    Nokia C2-06 Touch & Type - Dual GSM
    Rp.450.000,-

    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
    Rp 1.300.000

    Ready Stock !
    Acer Aspire S3-951-2364G34iss
    Rp. 1.200.000,-

    Ready Stock !
    Acer Aspire 5951G Core i7 2630 Win 7
    Rp. 2.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
    Rp. 2.500.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mm
    Rp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000

    ReplyDelete
  18. wah postingan maskolis semuanya sangat berguna, ditunggu yang berikutnya ya gan dan kunbal ke http://mascamat.blogspot.com

    ReplyDelete
  19. Mantab semua artikelnya mas kolis...
    bnyak manfaat bagi bnyak umat.

    ReplyDelete
  20. Terima kasih banyak ya jadi sangat bermanfaat Kerudung Bagus

    ReplyDelete
  21. lagi belajar buat toko online tapi kok susah bangeet ya...gak ngerti2..mau ubah sub2 judul daftar isi gaptekdotcom...

    ReplyDelete
  22. Produk di Jamin Asli.
    ELECTRONIC SOLUTION-SHOP.
    Menawarkan harga Promo , Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi Tam .Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya,
    Berminat Hub: Hotline/sms: 0857-7087-2865 ATAU KLIK WEBSET RESMI KAMI http://electronicsulution-shop.blogspot.com
    BlackBerry>Samsung>Nokia>Apple>Acer>Toshiba
    Led tvlg>Led tv Samsung>Nikon>Canon>DLL

    Dijual,
    Ready Stock !
    Blackberry Bold 9780
    Harga Promo Rp.1.500.000,-
    Ready Stock !
    BlackBerry Bold Curve 9300,
    Harga promo Rp.1.000.000,-
    Ready Stock !
    BlackBerry Torch 9800
    Rp.1.600.000,-
    Ready Stock !
    BlackBerry Z10
    Rp.3.500.000,-
    Ready Stock !
    BlackBerry Q 10
    Rp.4.000.000,-
    Ready Stock !
    Samsung Galaxy S3 Mini
    Rp. 2.700.000,-
    Ready Stock !
    Samsung Galaxy Ace
    Rp.1.400.000,-
    Ready Stock !
    Samsung Galaxy S2
    Rp.2.500.000,-
    Ready Stock !
    Samsung Galaxy S4
    Rp.4.500.000,-
    Ready Stock !
    Nokia 808 Pure View
    Rp.4.200.000,-
    Ready Stock !
    Nokia Lumia 820
    Rp. 2.700.000,-
    Ready Stock !
    Nokia Lumia 920
    Rp.3.400.000,-
    Ready Stock !
    Nokia Lumia 620
    Rp. 1.500.000,-
    Ready Stock !
    Apple iPhone 5G 16GB
    Rp.4.100.000,-
    Ready Stock !
    Apple iPhone 4G- 32GB
    Rp.3.500.000,-
    Ready Stock !
    Apple iPhone 3G-16GB
    Rp.2.900.000,-
    Ready Stock !
    Apple iPhone 4S-64GB
    Rp.4.000.000,-
    Ready Stock !
    Acer Aspire one 756
    Rp.1.400.000,-
    Ready Stock !
    Acer Aspire E1-471G
    Rp.2.800.000,-
    Ready Stock !
    Acer Aspire S5 Ultrabook Core 17
    Rp.7.000.000,-
    Ready Stock !
    Toshiba Satellite C800D-1006
    Rp.2.500.000,-
    Ready Stock !
    Toshiba Satellite C800D-1003
    Rp.1.500.000,-
    Ready Stock !
    Toshiba Satellite L840-1045XR
    Rp.3.700.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5100
    Rp 3.500.000,-
    Ready Stock !
    Led TV Lg 42 inch LN5710
    Rp. 4.000.000,-
    Ready Stock !
    Led TV Lg 39 inch LN5100
    Rp. 3.000.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F5000
    Rp. 2.100.000,-
    Ready Stock !
    Led TV Samsung UA 32 inch F4000
    Rp.1.500.000,-
    Ready Stock !
    Nikon D5100+18-15Kit
    Rp 3.500.000,-
    Ready Stock !
    Nikon D3000 Kit 18-15mm VR
    Rp. 1.500.000,-
    Ready Stock !
    Nikon D3200 Kit 18-105mm VR
    Rp 3.100.000,-
    Ready Stock !
    Canon Eos 600D Kit EF-S 18-135mm
    Rp.3.800.000,-
    Ready Stock !
    Canon Eos 70D Kit EF-S 18-55mm is stm
    Rp.4.700.000,-
    Ready Stock !
    Canon Eos 600D Body
    Rp.2.500.000,-


    Kami melakukan Pengiriman barang lewat Tiki atau Jne ,Pos,Cargo,bagi luar kota,Ongkir ditanggung pembeli
    Berkat Anda Usaha Kami Jadi Semakin Lancar,Terima kasih telah berbelanja di Electronic Solution-Shop.

    Nikmati berbagai keuntungan berbelanja di sini.
    *Barang berkualitas dan harga relatif lebih murah
    *Dapat diantar ke seluruh indonesia
    *Keamanan di jamin karna setiap pengiriman di sertai asuransi proses cepat dan sederhana
    Barang di jamin 100% original baru dan bergaransi resmi.
    Selamat Berbelanja ! ! !

    ReplyDelete
  23. mas, langkah kedua-nya kok eror? "HTML Anda tidak bisa diterima: Tag putus: SPAN" Katanya..... Tolong pencerahannya y..... Visit back juga y..... http://3defit.blogspot.com

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger