Buat Daftar Isi Accordion Slider Keren dengan CSS/jQuery Versi Utta'

Baiklah pada kesempatan hari ini, saya tidak henti2 nya tuk memberikan tutorial menarik dan unik mengenai blogger, dan sekarang saya akan mencoba memberikan tutorial tersebut yaitu membuat 'Daftar Isi Accordion Slider' dengan efek CSS dan jQuery ala utta' tentunya.heheee,..

Jika masih penasaran, dengan tampilannya, sobat bisa lihat lansung screenshot berikut.



jika masih belum puas, bisa lihat langsung daftar isi blog saya disini..

Gimana tertarik gak tuk mencobanya diblog sobat???.. :D
Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya :

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.

<style type="text/css">
#dafis-acc{
font-family:dicotmedium;
font-size:14px;text-align:center;
background:url(IMAGE) #111;
padding:2px 0;
border-bottom:15px double #666;border-left:10px double #252525;border-top:15px double #666;border-right:10px double #252525;
}
.dafis-label{-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
background:#1d1d1d;
font-weight:normal;font-size:15px;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align:baseline;
margin:1px 3px;
outline:none;
cursor:pointer;
text-decoration:none;
padding:2px 10px;
color:#D4D4D4;text-shadow:2px 1px 8px #000, 0px -1px 3px #000, 2px 2px 2px #000;
border-bottom:5px double #252525;border-left:5px solid darkred;border-top:5px double #111;border-right:5px solid darkred;
}
.dafis-label:hover{text-shadow:0 0 3px red,0 0 3px red,0 0 3px red,0 0 3px red;
background:url(https://lh6.googleusercontent.com/-e6rg68VxX0A/Tvho9FLt2fI/AAAAAAAAA8U/C9c9ZPCQ7Xg/s480/dicky-blood.gif) top #111;
border-bottom:5px double #252525;border-left:5px solid blue;border-top:5px double #111;border-right:5px solid yellow;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background:#111;
line-height:1.5em;font-family:gisha;text-shadow:1px 1px 0px #000;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #252525;
}
.dafis-daf ol li a{
text-decoration:none;
display:block;color:#fff !important;
padding-left:10px;
border-left:5px solid blue;
}
.dafis-daf ol li a:hover{
background:#1d1d1d;color:#fff !important;
border-left:5px solid darkred;
padding-left:5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- Content - http://ut2a-4down.blogspot.com/ - Start --><script src='http://ut2a-4down-blogspot-com.googlecode.com/files/akauttadafis.js' type='text/javascript'/></script><script type="text/javascript" src="http://ut2a-4down-blogspot-com.googlecode.com/files/akauttadaftarisi2.js"></script><script src="http://ut2a-4down.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script><!-- Content - http://ut2a-4down.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'.

Itu tadi tutorial kita hari ini, jika ada di antara temen-temen yang masih bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini.

Please rate this article: