Pada postingan sebelumnya saya pernah bahas mengenai daftar isi jquery accordion didalam postingan blog. Kali ini daftar isi / sitemap dengan menggunakan sentuhan efek animasi jquery accordion akan dipasang di sidebar blog. Untuk screenshot dari Daftar Isi jQuery Accordion dapat anda lihat dibawah ini.
Cara Membuat Daftar Isi jQuery Accordion di Sidebar
1. Login ke blogger
2. Di dashboard blogger, pilih Tata Letak => Tambah Gadget
3. 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/AVvXsEhFy6BE0pCa_DCeCnqWe1vp7S0hi1tPzJiFr6WHGZd7OmH8Pg6AvLXL6RxxKzkHOD_7YPsLoCgtG2d4QgRlwyVhyphenhyphenoL6iysB3XMEeCxzzsjM8lySvZBcI9UHMq4r112TT8BR_Q0a0nKOI_Q/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/AVvXsEg0G6MHaKXBaEXYF1F9bGWcDYvKrg0ZEmoIHCQRe6yCJQ8j1Gi2Ai-icnfTgj1fWqAK0Fnqrc3Dc7TQisGZztpcO54-6TcpIF9kLWrwyf8wD5wTke4-3fBr2ltUXFqiRPb-aABbT52jg70/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/AVvXsEgY56QYEHoVmwvnbx0tTshyuuaaCREs7zn9jBrEhiBkO3707h8l2cyYIfEBkzH0zzkBmLWPIxDSvR8H_aQtR-M8Lx_pxUoviIJAhaM2v6cPSXAa8zj-ZcuUsBARE6tmSXPK4mjGYq83PuY/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/lintastutor/rudy/Table-of-Content.js" type="text/javascript"></script><script src="http://lintas-tutor.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
4. Simpan
Demikianlah tutorial blog mengenai cara membuat daftar isi dengan jQuery accordion di sidebar, silahkan diterapkan dan semoga ulasan ini bermanfaat.
