Home » » Cara Membuat Daftar Isi Accordion di Blog

Cara Membuat Daftar Isi Accordion di Blog

Written By AiRa LoKa on Sabtu, 04 Mei 2013 | 14:45

Cara Membuat Daftar Isi Accordion di Blog

     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. Selain itu daftar isi ini 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, bagi yang mau coba, Langsung saja..
Check It Out......

1.  Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Cari kode ]]></b:skin>.

2.  Pastekan Script dibawah ini diatas kode ]]></b:skin>.
#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);
}
3. Cari kode </head>. Pastekan script jquery ini diatas kode </head>.
Nb: jika blog anda sudah terpasang jquery, lewati saja langkah ini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>

4.  Simpan template.

5.  Buat sebuah laman baru. buka tab HTML (bukan compose) lalu pastekan script dibawah ini.
<script type="text/javascript" src="https://sites.google.com/site/airalokablogspotcom/download/daftar%20isi%202.js"></script><script span style="990000" src="http://airaloka.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
6.  Ganti kode yang berwarna biru dengan url blog anda.

7.  Publikasikan.

4 komentar:

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. wah infonya bagus banget gan
    sekalian ane dah follow blog agan
    jangan lupa follback yaaaa gan :)
    http://pixmasoftware.blogspot.com/

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Setelah membaca artikel ini, silahkan tinggalkan komentar. Bagi yang mau meninggalkan url blognya, silahkan saja. Asalkan anda tidak memberikan komentar dengan kata-kata yang tidak sopan. Terima kasih telah mengunjungi blog ini.

AiRa LoKa - Blog of tutorials

Konversi Kode di Sini!

 
Support : Blogger | Google | KlikSaya
Copyright © 2013. AiRa LoKa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger