Baiklah Kali ini saya akan membuat artikel mengenai "Daftar Isi Accordion Slide Sederhana Ala UTta' Ver.3", ini hanya untuk melanjutkan tutorial sy sebelumnya :
1. Daftar Isi Menurut Label-Kategori Ala UTta' Ver.1
2. Daftar Isi Accordion Slider with CSS/jQuery Ala UTta' Ver.2
Saya akan coba jelaskan Sedikit : Daftar Isi Accordion merupakan daftar isi yang sangat unik dan sangat membantu para pengunjung blog dalam melihat daftar isi suatu blog, dilihat dari nama nya sudah Accordion yang merupakan sebuah alat musik yang dimainkan naik turun dan mengeluarkan bunyi/suara, begitu juga pada Daftar isi Accordion yang akan saya jelaskan ini, semua update postingan terbaru akan otomatis langsung berada di dalam daftar isi Accordion ini!!! kita bisa menggantinya sesuai dengan keinginan kita.
Berikut ini adalah bagaimana cara membuat daftar isi Accordion Tersebut sahabat bisa lihat dibawah ini.
1. Cara memasangnya dengan membuat sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content ).
2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
3. Dan Copy dan kode di bawah ini :
<style type="text/css">
#UTdaftar-isi{
width:100%;
background:rgba(0, 0, 0, 0.7);
border:2px solid #bbb;
color:#fff;
overflow:hidden;
}
#UTdaftar-isi .judul-label{
overflow:hidden;
cursor:pointer;
text-decoration:none;
font:normal 14px/100% monospace, sans-serif;
padding:10px 15px 11px;
color:#eee;
text-shadow:1px -1px 1px rgba(0, 0, 0, 0.9);
border-top:1px solid #444;border-bottom:1px solid #222;
background:rgba(0, 0, 0, 0.7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333');
background:-webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#333));
background:-moz-linear-gradient(top, #3c3c3c, #333);
background:-o-linear-gradient(#3c3c3c, #333);
background:linear-gradient(#3c3c3c, #333));
}
#UTdaftar-isi .judul-label:hover{
background:#333;
}
#UTdaftar-isi .headactive{
color:#efefef;
border-top:1px solid #999;border-bottom:1px solid #999;
background:#222;
}
#UTdaftar-isi ol{
background-color:#444;
margin:0 0;
padding:0 0;
color:#999;
list-style:none;
}
#UTdaftar-isi li{
line-height:normal;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.9);
font:normal 14px/100% 'Consolas',Arial,Sans-serif;
margin:0 0;text-decoration:none;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;
padding:5px 5px 5px 15px;
white-space:nowrap;
text-align:left;
border-top:1px solid #555;border-bottom:1px solid #333;
}
#UTdaftar-isi li:hover{
border-left:12px solid #333;background:#333;
}
#UTdaftar-isi li:first-child{border-top:none;}
#UTdaftar-isi a{color:#eee;}
#UTdaftar-isi a:hover{color:#000088;}
#UTdaftar-isi a:visited{color:#999;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- Content - http://ngawicybers.blogspot.com/ - Start -->
<script src="http://ut2a-4down-blogspot-com.googlecode.com/files/dafisblogakautta.js"></script><script src="http://ta-movie87.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script><script src="http://ut2a-4down-blogspot-com.googlecode.com/files/dafisblogakautta1.js"></script><!-- Content - http://ngawicybers.blogspot.com/ - End -->
- Ubah teks yang berwarna merah dengan dengan url blog anda.
- Sedangkan Teks yang berwarna hijau adlah script pendukung, jika sudah memasangnya ditemplate sobat, mka script diatas gak perlu lagi.OKE.
3. Langkah Terakhir 'Klik Publish Post'.
Selamat Mencoba ^^
Posting Komentar