Januari 31, 2012

Membuat Daftar Isi Dengan Efek jQuery Accordion

Situseo Blog : Daftar isi atau table of content yang biasa kita sebut dengan sitemap, merupakan fasilitas yang penting dan sangat berguna terutama untuk pengunjung blog untuk bisa lebih mudah menelusuri isi dari suatu blog, dengan tampilan yang elegant dan efek yang lembut menjadikan daftar isi bisa menjadi pilihan untuk melengkapi blog kalian.

Daftar isi yang akan saya share sekarang ini akan menggunakan efek jquery accordion, dengan efek jquery akan menampilkan efek yang lembut dan css akan membentuk tampilan yang lebih menarik. Script jquery accordion ini dibuat oleh teman netterku dalam dunia blog saudara Hendriono, sedangkan saya hanya memodifikasi bagian css untuk bentuk tampilannya. Untuk melihat bagaimana bentuk tampilan dan efek yang dihasilkan dari jquery accordion, kalian bisa meng-klik link demo dibawah ini :


Bagaimana menurut kalian? tertarik untuk membuatnya dalam blog kalian? jika tertarik kalian bisa mengikuti caranya seperti dibawah ini :
  • Masuk Design - Edit HTML
  • Jika diperlukan, kalian membuat backup template terlebih dahulu dengan cara men-Download Full Template untuk menghindari segala kesalahan.
  • Selanjutnya cari kode ]]></b:skin> dan letakan kode css dibawah ini diatas kode ]]></b:skin>

#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);
}

  • Kemudian cari kode </head> dan letakan kode dibawah ini diatas kode </head>

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

Penting!!! periksa dalam tag head template kalian, jika sudah ada script jquery tersebut diatas, kalian tidak perlu menambahkan script jquery tersebut (cukup satu saja script jquery) dimaksudkan untuk menghidari konflik script, karena script yang dibuat berdasar perintah javascript termasuk jquery sebagai turunan javascript, rentan terjadi bentrok antar script.
  • Save template kalian.
Script dibawah ini adalah untuk menampilkan daftar isi, kalian bisa meletakan pada postingan, widget atau bisa memanfaat halaman statis sebagai media untuk menampilkannya, untuk cara menggunakan halaman statis, kalian bisa membacanya pada Cara Membuat Halaman Statis.
  • Copy paste script dibawah ini pada postingan atau post page (halaman statis) dalam mode editor Edit HTML

<script type="text/javascript" src="http://situseo.googlecode.com/files/Table-of-Content.js"></script>
<script src="http://situseo.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan : ganti url blog yang berwarna merah dengan url blog kalian.

Semoga bermanfaat,

35 Diskusi untuk Membuat Daftar Isi Dengan Efek jQuery Accordion

1 Februari 2012 19.44  

di daftar isi "Thanks For Visitng"nya kok ke link http://situseo-sample.blogspot.com/ gimana cara ngubahnya ? thx be4

2 Februari 2012 06.39  

makasi infonya, sangat bermanfaat sekali...

2 Februari 2012 22.17  

@Informasi Tips dan Bisnis : sama-sama, senang jika blog ini bermanfaat untuk orang lain

5 Februari 2012 21.38  

mas .js table of content tuh yg mana..??

12 Februari 2012 00.10  

thanks gan dah share, salam kenal

13 Februari 2012 19.11  

kok ga sama kayak punya kakak? ngasih background nya + spoiler gimana kk

13 Februari 2012 19.56  

@blogger bondowoso : sama-sama
@Journalist MadCrew Smaboy : daftar isi backgroundnya sama dengan kode yang saya share, daftar isi ini tidak memakai spoiler

21 Februari 2012 15.06  

terima kasih atas infonya

3 Maret 2012 22.52  

mas, situs ini bagus artikelnya juga ok. tapi sayang daftar isi nya gak sesuai ma warna template ku.. (newbie)
bisa kasih tau gak cara ngerubah warna daftar isinya biar sesuai???
trima kasih

3 Maret 2012 23.41  

@Sundawi : ganti saja warna background-nya, kebetulan warna background menggunakan gradient jadi keterangan background banyak, kamu bisa menggunakan warna tunggal dengan menggunakan warna HEX yang bisa kamu ambil melalui tool kode warna pada menu diatas, semoga bisa membantu

4 Maret 2012 07.29  

Mas daftar isi j-qury-nya bisa tapi kog ngak ngefek....!!!!!

4 Maret 2012 18.12  

@Agust Arexca : kemungkinan script jquery-nya bentrok, script jquery hanya 1 saja yang terpasang, jika sebelumnya pernah memasang script tersebut.

5 Maret 2012 15.37  

thanks mas

5 Maret 2012 17.17  

Tipsnya bagus banget,
tp aku heran nih, kenapa blog saya ga bisa di pasang daftar isi yah....???

15 Maret 2012 10.01  

keren banget sob sumpah.... sob, berarti daftar isi accordian ini di ambil dari tag label ya ? kl misal kita ingN mnmplkan tag dr sebuah label tertentu saja cara nya gimana sob ? kebanyakaN soal nya punya saya, jd krng flexible tampilannya.
mohon bantuannya yach :)

20 Maret 2012 11.52  

cara ganti warna tulisannya gimana sob

20 Maret 2012 17.00  

@Journalist MadCrew Smaboy background yang saya share pada post sama persi dengan background yang saya pergunakan, kebetulan backgroundnya transparan, jadi menyesuaikan dengan background template, btw daftar isi tidak menggunakan spoiler

20 Maret 2012 17.06  

@Elfaizz 1. ada kemungkinan kode jquerynya bentrok, coba periksa pada template apakah ada kode jquery tersebut, jika sudah ada tidak perlu menambah kode jquerynya, hanya satu saja kode jquery.
2. jika masih tidak jalan, coba kamu gabungkan saja kode cssnya dengan kode lainnya pada tempat kamu akan menampilkan daftar isi

20 Maret 2012 17.09  

@EbethAbie pada kode css, kamu ganti saja kode warnanya

color :#....;

untuk menentukan warna yang cocok bisa pergunakan tools kode warna pada menu di atas.

semoga membantu

25 Maret 2012 11.22  

matap deh gan..... Thank's.... :)

25 Maret 2012 11.24  

Tapi saya mau tanya ne, Tempelate model apa yang Agan Pake, cara nya gimana tuh buat bisa kayak gini.. Hehehe..... Soalnya keren Gan..... ^_^

25 Maret 2012 18.00  

@Dhonie Moch Romdhonie template yang saya gunakan saya ambil dari kumpulan free template dari Dicas Blogger, cuma saya modifikasi ulang tampilannya.

bisa jadi kayak gini, ada beberapa bagian yang saya modifikasi dan caranya pun sudah saya postkan semua pada blog ini...tinggal pilih bagian mana yang akan dimodifikasi duluan.

5 April 2012 10.24  

mas bagaimana cara untuk menghilangkan link pada kata "THANKS FOR VISITING". padahal udah saya hilangkan (edit Script nya & taruh ke code google) melalui Notepad dan hapus linknya. tp kok malah error ya?

bisa minta caranya. Thanks..

5 April 2012 23.52  

@darkwatch caranya sudah betul cuma perlu diperhatikan script jquery saling berhubungan, jadi kalau ada yang terhapus mungkin malah ngak berjalan dengan baik

9 April 2012 21.29  

wah makasih mas, blog-qu jadi tambah keren, dn yang ini warnanya cocok sama layout blog sya.... masalah link tanks for visitting, nda peduli, lah wong emang di ambil dari sini jeh...hehehe

16 April 2012 08.29  

Gw juga ga masalah dgn Thank For Visiting nya.
Cuma yg jadi masalahnya , Tetap az ada kotak komentar dibawahnya. (kelihatan kotor dan buat mata sakit...:))

Nah yg jadi pertanyaan sama Mas Dalang, Bagaimana cara menghilangkan kotak komentar tersebut.

Tolong jawab mas dalang!!! Please Tolong, tolong dan tolong!!!

:)

17 April 2012 03.21  

@Jugul pada blogger interface baru perhatikan menu disebelah kanan :

post setting - option - reader comments - pilih dont allow - done, kemudian publish atau update

atau jika pada halaman statis

page setting - option - reader comment - pilih dont allow hide existing

21 April 2012 02.39  

Makasih infonya mas... sangat bermanfaat bgi newbie spt saya... Udah saya coba n tak taruh d sidebar, tapi judul yang panjang kok kepotong ya... Bisa ga diatur supaya judul yang panjang jadi pendek kayak raedmore gt? lam kenal mas.

22 April 2012 02.08  

@Rahulwhite-space: nowrap;

ganti menjadi

white-space: normal;

semoga membantu

6 Mei 2012 17.33  

mas setelah saya coba pd blog sy tp ada kendala pada masalah jumlah postingan. misal pada kategori tips and trik blog, postingan sebenarnya sekitar 67 postingan tp yang muncul pd daftar isi sekitar 30an. Mungkin bisa kasih solusinya.Jadi postingan tdk muncul semua pd daftar isi. Terima kasih sebelumnya.ini blog sy www.Indoking.blogspot.com

14 Juli 2012 14.03  

mas gini, kategori dari artikel yang saya posting pada daftar isi jumlah label banyak ada sebanyak 58 kategori, mungkin dikarenakan terlalu banyak jadi hanya muncul sebagian hanya 27 kategori. Nah apakah ada solusinya spya bs tampil semua ataw emang hanya bisa 27 kategori yg bisa tampil?

15 Oktober 2012 11.15  

mantap gan buat daftar isi nya.
makasih yah, jangan lupa mampir ke blog ane,,he

27 Oktober 2012 04.49  

mas apa kah ini membuat berat blog.??

dan saya ingin menempatkannya di laman baru, kalau cara kasih background gambar pada laman baru itu gmn ya mas.?

1 Maret 2013 16.57  

Trims...sangat bermanfaat

16 Maret 2013 22.25  

Masya Alloh...indah bgt mas..

Tapi "Thanks For Visitng" nya gak bisa mnta tolong hilangin ya...hehe

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top