Cara Membuat Daftar Isi Blog Dengan jQuery Accordion

Cara Membuat Daftar Isi Blog Dengan jQuery Accordion - Pada postingan sebelumnya sudah saya share cara membuat daftar isi otomatis berdasa...

Cara Membuat Daftar Isi Blog Dengan jQuery Accordion - Pada postingan sebelumnya sudah saya share cara membuat daftar isi otomatis berdasarkan label, kali ini akan saya bahas cara memasang / membuat daftar isi dengan jQuery accordion. Penampilan sitemap atau daftar isi jquery accordion ini sangat bagus dan keren sekali serta mempunyai link bergoyang ketika disorot cursor mouse. Dibawah ini dapat anda lihat screenshot dari daftar isi menggunakan efek / animasi accordion. Bagaimana menurut anda, keren bukan?

Sitemap / daftar isi accordion jquery di blogger mempunyai kelebihan dalam meringkas / membuat irit ruang blog, jadi tidak akan memanjang sampai kebawah. Dengan begitu apabila artikel / postingan anda sudah melebihi 1000 artikel, apabila tidak dipasang daftar isi dengan scroll atau daftar isi dengan menggunakan jquery accordion, pasti akan memanjang ke bawah.

Cara Membuat Daftar Isi Blog Dengan jQuery Accordion

1. Login ke blogger anda
2. Pada dasbor masuk ke Template => pilih Edit HTML.
3. Backup dulu template anda
4. Centang kotak Expand Widget Template
5. Tekan F3 dan cari kode ]]></b:skin> lalu letakkan kode berikut 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(125,126,125,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: center;
}
.dafis-label:hover {
color: #F2F2F2;
}
.dafis-daf ol {
margin: 0 0 0 30px !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(0,0,0,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);
}

6. Lalu cari kode </head> dan letakkan kode berikut diatasnya

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Keterangan :
Apabila didalam template anda sudah terpasang kode script jQuery, maka tidak perlu lagi dipasang didalam template.

7. Simpan / Save Template

8. Selanjutnya anda buat postingan baru dengan judul daftar isi atau sitemap di blog anda dan pasang atau masukkan kode dibawah ini dalam posisi / mode HTML (bukan compose) setelah itu publikasikan.

<script src="https://sites.google.com/site/bloggerbondowosoblogspotcom/js/Table-of-Content.js" type="text/javascript"></script>
<script src="http://bloggerbondowoso24.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan :
Ganti url blog saya dengan url blog anda

Selamat dicoba tutorial blog mengenai Cara Membuat Daftar Isi Dengan jQuery Accordion di Blog, semoga bermanfaat dan semoga berhasil, happy blogging.