29 July 2012

Membuat Daftar Isi Akordion dengan Sortir Label

Do you want to share?

Do you like this story?

Setelah menghajar keyboard(nyapcai) disalah satu sites Paid To Typing jempol rada pegel dan mata berkunang-kungang,akhirnya beranjak sejenak meninggalkan PC dan langsung ke warteg (minta sedekah untuk makan sahur hehehe.....). Setelah makan,sambil rokok-an langsung menghadap layar Komputer lagi. Iseng-iseng buka blog indolaron,ternyata ada Visitor yang berkomentar tertarik dengan Script Sitemap yang ada di blog saya.

Memenuhi permintaan dari sobat Wammy, indolaron akan mencoba memberi Tutorial Cara Membuat Daftar Isi(Sitemap) akordion berdasarkan label.
Tutorial ini saya peroleh dari Master Web Design dan Web Develop Taufik Nurrohman. Sebenarnya saya juga gak begitu paham tentang yang di jabarkan oleh Beliau masalah JQuery,tetapi setelah saya otak-atik dan di cermati dengan seksama akhirnya code-code bisa berjalan.
Langkah Membuat Daftar Isi Akordion dengan Sortir Label
TAHAP I - MODIFIKASI kode CSS
1.Klik Template » Edit HTML » Proceed
2.Cari kode ]]></b:skin> kalau dah ketemu letakkan kode CSS berikut tepat diatasnya:
#daftar-isi {
background-color:#333;
border:2px solid #fafafa;
color:#fff;
margin-bottom:10px;
-webkit-box-shadow:0 1px 2px #000;
-moz-box-shadow:0 1px 2px #000;
box-shadow:0 1px 2px #000;
margin-top:-55px;
overflow:hidden;
}
#daftar-isi .judul-label {
overflow:hidden;
cursor:pointer;
text-decoration:none;
font:normal 13px/100% 'Electrolize',Arial,Sans-serif;
padding:10px 15px 11px;
color:#bbb;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
border-top:1px solid #444;border-bottom:1px solid #222;
background-color:#333;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333333');
background-image:-webkit-linear-gradient(top, #3c3c3c, #333);
background-image:-moz-linear-gradient(top, #3c3c3c, #333);
background-image:-o-linear-gradient(top, #3c3c3c, #333);
background-image:linear-gradient(top, #3c3c3c, #333);
}
#daftar-isi .headactive {
color:#efefef;
border-top:1px solid #24B6E3;border-bottom:1px solid #104968;
background-color:#248AB0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
background-image:-webkit-linear-gradient(top, #248AB0, #21739B);
background-image:-moz-linear-gradient(top, #248AB0, #21739B);
background-image:-o-linear-gradient(top, #248AB0, #21739B);
background-image:linear-gradient(top, #248AB0, #21739B);
}
#daftar-isi ol {
background-color:#333;
margin:0 0;
padding:0 0;
color:#999;
list-style:none;
}
#daftar-isi li {
line-height:normal;
font:normal 11px/100% 'Verdana',Arial,Sans-serif;
margin:0 0;
white-space:nowrap;
padding:5px 5px 5px 15px;
text-align:left;
border-top:1px solid #444;border-bottom:1px solid #222;
}
#daftar-isi li:first-child {border-top:none;}
#daftar-isi a              {color:#5687f8;}
#daftar-isi a:hover        {text-decoration:underline;}
#daftar-isi a:visited      {color:#5687b8;}
#daftar-isi strong {
font-weight:bold;
font-style:italic;
color:red;
}

lalu Save template lalu Close dialog
TAHAP II - BUAT HALAMAN BARU
1.Klik Pages/Laman » New page/Laman baru » Blank page/Laman kosong
2.Beri nama halaman sesuai keinginan anda(misal:Sitemap,Daftar Isi,Table of Content,dll)
3.Pilih mode HTML
4.Copy paste code dibawah ini ke dalam formulirnya
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var showNew    = true,
accToc     = true,
openNewTab = true, 
maxNew     = 10,
baru       = "Baru!",
sDownSpeed = 600,
sUpSpeed   = 600;
</script>
<script src="https://sites.google.com/site/indolaron/file-js/labels-accordion.js" type="text/javascript"></script>
<script src="http://indolaron.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
5. Lalu Simpan dan Terapkan
Catatan:
- Kode warna Biru jika pada template anda sudah sudah terdapat code tsb,maka tidak perlu menyisipkan lagi
- Tulisan warna Merah! : boleh ganti dengan keinginan kalian anda  (misal:New!!, Terbaru!!, dll).
- Ganti URL http://indolaron.blogspot.com dengan URL blog Anda
- var showNew : Jika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskan Baru! akan disembunyikan.
- accToc : Jika bernilai true, effect accordion akan diterapkan, jika bernilai false, effect accordion akan hilang sehingga semua daftar isi akan terlihat.
- openNewTab : Jika bernilai true, setiap link akan secara otomatis terbuka di tab/jendela baru saat diklik, jika bernilai false, setiap link akan terbuka di tab/jendela yang sama saat diklik.
- maxNew : Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).
- sDownSpeed : Digunakan untuk menentukan kecepatan effect .slideDown() panel.
- sUpSpeed : Digunakan untuk menentukan kecepatan effect .slideUp() panel.
sumber: http://hompimpaalaihumgambreng.blogspot.com/2012/02/widget-daftar-isi-akordion-dengan.html#.UBQlfNlTenA
SEMOGA BERMANFA'AT...!!!

ARTIKEL TERKAIT :

16 komentar :

  1. makasih infonya sob,...
    kunjungan pagi niy :D

    ReplyDelete
  2. daftar isi ternyata bisa begitu yan tampilannya ..keren :)

    ReplyDelete
  3. I love the valuable info you supply in your posts. I like your writing style.

    ReplyDelete
  4. vcdategook:maksih banget atas infonya bos

    ReplyDelete
  5. Mantaf Infonya, salam kenal bro :D

    ReplyDelete
  6. Thanks For Your Information Jangan Lupa Kunjungi Blog Saya >>hanifahputri51.blogspot.com :imhere:

    ReplyDelete
  7. mantaps gan tutornya, izin nyoba dulu gan...
    jangan lupa berkunjung gan....
    di tunggu yah..

    ReplyDelete
  8. keren banget gan....mksih.. :-d

    ReplyDelete
  9. terima kasih benra-benar membantu

    ReplyDelete
  10. wah, keren nih gan...
    ijin coba...

    happy blogwalking kawan!

    visit me kawan:
    http://aan-shared.blogspot.com

    ReplyDelete
  11. keren banget tempenya gan..
    mampir balik ;)

    ReplyDelete
  12. makasih infonya mas.. tak coba dulu..

    ReplyDelete
  13. @Abi Com
    Silahkan mas,makasih dah mampir dan baca2 artikel diblog ini :)

    ReplyDelete
  14. langsung coba diblog ane gan..thanks ya,, ini sangat kerennnnn :-d

    ReplyDelete
    Replies
    1. Iya gan silahkan diterapkan,tutorial ini hasil kreasi Mas Taufik Nurrohman itu tuh sang Master Web Design dan Web Developer :-d

      Delete
  15. mantaf...langsung praktek,masih newbie sob ijin belajar

    salam kenal

    ReplyDelete
SILAHKAN TULIS KOMENTAR ANDA, DENGAN CATATAN :
* Komentator "Anonymous" tidak diprioritas-kan, jadi gunakan salah satu Profile untuk respon lebih cepat
* Jika anda tidak memiliki akun Google anda bisa gunakan Name/URL
   - isi Name dengan Nama Anda
   - isi URL dengan link/url profile Facebook Anda atau Twitter Anda atau yang lainnya
* Mohon jangan menyisipkan Link Hidup..!!!
* Please do not insert Live Links ....!!!

Advertisements

Advertisements

 

Membuat Daftar Isi Akordion dengan Sortir Label Oops ! | Error 404