Cara Membuat Daftar isi Dengan Efek Accordion
Postingan kali ini ane mau berbagi dan belajar bersama bagaimana Cara Membuat Daftar Isi Dengan Efek Accordion. Pada setiap blog memang daftar isi sangat dibutuhkan karena dapat membuat pencarian lebih mudah dan efisien selain dan dapat membuat blog kita semakin bagus. Membuat daftar isi dengan animasi accordion pada blog dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang, sekaligus mudah dan rapi untuk blog serta artikel yang di susun berdasarkan label/kategori. Ok lanjut mari disimak ya!
1. Log in dulu ke account blog agan masing"
2. Pada dasboard masuk ke Rancangan lalu pilih Edit HTML.
3. Setelah itu cari kode berikut ini ]]></b:skin>
4. Jika sudah ketemu copy kode dibawah ini dan taruh diatasnya.
#dafis-acc{
font-family: Tahoma ;
font-size:11px;
color:#333;
background:#ffffff;
}
.dafis-label {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSigxTnx0pBjS8tuBxNe8Bofc7ZZ52c5dd1FWV3tdyvqfNVFysAHfOp6F5GJKNy7YyL0LF3MgQvcgc9S7UONKhBaLxaGMg6RaYAngMPCXRkZXDqxG3S1P4YFtD3EODZJ3nCKNCalMXhs/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
border: 1px solid #2F94BA;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
line-height: 1.4em;
margin: 1px 3px;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
.dafis-label:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieaBZPzh83imTz1BsV8sKOUK5dkz5R3Z50za201Lw41UroY4IpKYSrNbusf7q8HmAeNX_vc4kQOABMmnXt78UgISh2CjDDzhGAzfaTHaguJLAzGNjtFbqwP0ZyJQ2Umfdx0dPp7eGC4W8/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;
border: 1px solid #339DC6;
line-height: 1.5em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
background: none repeat scroll 0 0 #7BC4DF;
border-left: 5px solid #333333;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
font-family: Tahoma ;
font-size:11px;
color:#333;
background:#ffffff;
}
.dafis-label {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSigxTnx0pBjS8tuBxNe8Bofc7ZZ52c5dd1FWV3tdyvqfNVFysAHfOp6F5GJKNy7YyL0LF3MgQvcgc9S7UONKhBaLxaGMg6RaYAngMPCXRkZXDqxG3S1P4YFtD3EODZJ3nCKNCalMXhs/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
border: 1px solid #2F94BA;
color: #FFFFFF;
cursor: pointer;
font-weight: bold;
line-height: 1.4em;
margin: 1px 3px;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
.dafis-label:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieaBZPzh83imTz1BsV8sKOUK5dkz5R3Z50za201Lw41UroY4IpKYSrNbusf7q8HmAeNX_vc4kQOABMmnXt78UgISh2CjDDzhGAzfaTHaguJLAzGNjtFbqwP0ZyJQ2Umfdx0dPp7eGC4W8/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;
border: 1px solid #339DC6;
line-height: 1.5em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
background: none repeat scroll 0 0 #7BC4DF;
border-left: 5px solid #333333;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
5. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode. Jika sebelumnya sudah pernah memasang scipt jQuery maka cara ini lewati saja langkah diatas
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
6. Kemudian Klik Simpan Template.
7. Buatlah sebuah posting blog dengan judul misal daftar isi, sitemap, dsb
8. Selanjutnya masukan kode di bawah ini pada postingan, Edit HTML. Cukup ubah dengan nama blog agan/i hasilnya seperti dibawah
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://idnsoftware.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>9. Selanjutnya klik publish, lihat postingan baru tersebut pasti sudah muncul.
Sekian posting kali ini, semoga dapat bermanfaat ya untuk ane sendiri sudah coba untuk widget dikanan blog dengan sedikit modifan, selamat mencoba.
Post a Comment