Cara Membuat Daftar Isi Blog Dengan jQuery Accordion

Tampilan sitemap atau Daftar Isi jQuery Accordion jika dipasang di blog memang terlihat keren. Anda lihat screenshot dari daftar isi efek / animasi jquery accordion dibawah ini, menarik bukan? Bagaimana cara membuat daftar isi dengan jquery accordion di blogspot? simak tutorialnya dibawah ini.

Cara Membuat Daftar Isi Blog Dengan jQuery Accordion

1. Login ke blogger
2. Pada dashboard, pilih Template => Edit HTML.
3. Tekan Ctrl+F, cari kode ]]></b:skin> dan 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);}

4. 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'/>

Apabila pada template sudah ada kode diatas, maka tidak perlu lagi dipasang didalam template.

5. Simpan Template

6. Lalu anda buat postingan baru dengan judul daftar isi / sitemap, pada mode HTML (bukan compose) anda masukkan kode dibawah ini dan publikasikan.

<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>

Keterangan :
Teks warna merah silahkan ubah dengan url blog anda

Semoga ulasan mengenai cara membuat daftar isi / sitemap jquery accordion di blogspot dapat bermanfaat, happy blogging.

tutorial blog

Terlintas

Cara Membuat Daftar Isi Blog Dengan jQuery Accordion

Related Posts

Entri Populer