Membuat Daftar Isi With jQuery Accordion
Daftar isi accordion ini memiliki efek animasi, dengan efek animasi menjadikan daftar isi terlihat rapih dan dinamis, bagi anda yang tertarik ingin memasang Daftar Isi With jQuery Accordion berikut ini langkah-langkahnya :
Membuat Daftar Isi With jQuery Accordion
1. Login keakun Blogger
2. Pilih Template » Klik Edit HTML
3. Selanjutnya anda cari kode ]]></b:skin>
4. Kemudian anda latakkan kode dibawah ini diatasnya
#dafis-acc { font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:14px; } .dafis-label {
background: rgb(125,126,125);
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
background: -webkit-linear-gradient(top, rgba(43, 45, 200, 1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
color: #A1A1A1;
text-transform:uppercase;
font-weight: bold;
line-height: 2em;
margin: 1px 3px;
cursor: pointer;
outline: medium none;
overflow: hidden;
padding: 2px 10px;
text-decoration: none;
text-align: left;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 5px !important;
padding: 0 !important;
}
.dafis-daf ol li {
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(32, 110, 252, 0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
line-height: 1.3em;
margin: 1px 3px !important;
text-align: left;
white-space: nowrap;
}
.dafis-daf ol li a {
color: #333333 !important;
display: block;
padding-top:5px;
padding-left: 10px;
text-decoration: none !important;
}
.dafis-daf ol li a:hover {
color:f2f2f2;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
5. Selanjutnya anda cari kode </head> lalu letakkan kode dibawah ini diastasnya :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Note :
Apabila ditemplate anda sudah terdapat kode diatas silahkan anda melewati tahapan diatas.
6. Simpan Template
Menampilkan Daftar isi
Untuk menampilkan daftar isi diperlukan kode pemanggil dengan cara anda masuk kelaman baru » klik compose HTML » kemudian anda letakkan kode dibawah ini pada content yang tersedia
<script src="https://aakyos.googlecode.com/svn/trunk/Table-of-Content.js" type="text/javascript"></script>
<script src="http://aak-share.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
Note:
Kode yang saya beri warna merah silahkan anda ganti dengan URL Website/Blog anda
1000 adalah jumlah tampilan pada daftar isi
Kemudian anda publikasikan
Demikian Membuat Daftar Isi With jQuery Accordion , semoga bermanfaat!
0 Response to "Membuat Daftar Isi With jQuery Accordion "
Post a Comment