Cara Membuat Daftar Isi jQuery Accordion di Sidebar - Memang tidak dipungkiri kalau tampilan daftar isi dengan sentuhan efek animasi jquery accordion terlihat menarik dan keren sehingga pantas dipasang di blog. Cara membuat daftar isi dengan menggunakan jquery accordion ini tidaklah terlalu sulit, nah bagi anda yang ingin memasang daftar isi blog jquery accordion di blogger kesayangan anda, silahkan simak tutorial blog cara bikin daftar isi dengan efek animasi jquery acordion dibawah ini sampai tuntas.Tapi sebelumnya simak juga cara membuat Sitemap blog dengan jquery accordion di dalam postingan blog.
Cara Membuat Daftar Isi jQuery Accordion di Sidebar
Cara Membuat Daftar Isi jQuery Accordion di Sidebar Blog
1. Login ke akun Blogger anda
2. Pilih Tata Letak
3. Pilih Tambah Gadget
4. Pilih HTML/Javascript dan masukkan kode berikut kedalamnya
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoCsJ3dLz9uo70bW2ppUD-4TcvPzuA15HNi0fMCA9Ru6PP5xbLa-XJPozgh_Xovz8tLI4Y97c-bOo3jUGgDXzjBiYxE5i4W6RjaIw2bDXAYMFITpy6bUWMRCrkYM_1lF-NX_NzewbwxDE/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJq8s38ZdQHZW7GU8ze9lbdmMRg0ycfkcuUrK53UaMhjGJIMz3ufOfLwkUGeXKU5Pp3ahOgUacf_sr_fCioaO3gE5IwDxHA1R2M75vLBJHWB6MrtFgv455srXCWaaOcEOQpXFfkVERZ3w/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGxnnQ7iJXeAtdI-ZjzQW_hUxm5XrJspkpT5U5Ks2Gp4iEl2_DRhhVaWLT4k6wIdg-3FNarEmOvDtHJL0hRvd5yjYZuI6Q4_BPTql4TDWLo3ZiBgXTnlkEB4SDfBFUwyG0mAV3YXtC8M/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); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/bloggerbondowosoblogspotcom/js/sitemap.js" type="text/javascript"></script><script src="http://caraterupdate.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
Keterangan:
1. Ganti http://caraterupdate.blogspot.com/ dengan URL blog anda
2. Angka 1000 menunjukkan jumlah daftar isi yang ditampilkan
Selamat dicoba cara membuat daftar isi blog dengan jQuery accordion di sidebar untuk diterapkan di blog kesayangan anda.
Sekian - Cara Membuat Daftar Isi jQuery Accordion di Sidebar
0 comments:
Post a Comment