daftar isi cantik ala jQuery

Kamis, 22 Juli 2010 , Posted by Maulana Sp at 02.46

Berawal dari blogwalking ke blog sobat saya ojelhtc, ketika saya hendak mengarungi lautan artikel dalam blognya saya menemukan sesuatu di bagian daftar isinya,apa penemuan itu?penemuan itu adalah penampilan daftar isi itu sendiri,yg menurut saya sangat memukau akan keindahannya(menurut saya),dan saya mulai tertarik untuk ikut memasangnya di markas saya model daftar isi ini tergolong unik,dimana cara pengambilannya berdasarkan label atau kategori blog sehingga tidak terlalu panjang dan ringkas dan terkesan rapi,juga Blog anda akan terkesan lebih Profesional,untuk demonya anda bisa lihat pada gambar dibawah ini atau lihat langsung daftar isi di blog saya disini


Cara Membuat Daftar Isi Model JQuery Accordion

gimana ni?merasa tertarik?kalo ya,saya akan ngajarin kamu cara ngebuatnya,perhatikan dengan baik..
tak Usah Berbasa-basi Lagi,kita tu de poin saja .Ikuti ayat-ayat Berikut Ini...

  1. Login Ke Blogger.
  2. Masuk Ke Rancangan Lalu Edit HTML.
  3. Cari Kode Di Bawah Ini
  4. ]]>Lalu
  5. Masukan (copy paste) kode CSS dibawah ini diatas kode pada Langkah 4:

#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; 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: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }


Cssnya Sudah Dirapatkan Sedikit..
6.Cari kode dibawah ini:
</head> atau head

Langkah 7.
Masukan (copy paste) kode javascript dibawah ini diatas kode pada Langkah 6:

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

Lalu Simpan Template dan Langkah Terakhir Buat sebuah artikel dengan judul terserah anda (misal; Daftar Isi atau Table of Content) Lalu Ke Mode Edit HTML lalu Masukan (copy paste) kode dibawah ini ke dalam artikel :

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

ubahlah NAMABLOGANDA yg ada dalam kode dengan nama blog anda,jangan dengan alamat blog saya.ntar akan terjadi hal yang tak diinginkan,dan selesai sudah..
kalo menurut kamu ini bermamfaat silakan berikan komentar sahabat dibawah ini.


Blogger NewbieAssalamualaikum,
semoga melalui blog yang sederhana ini kita bisa saling berbagi pengetahuan. sang admin bukanlah blogger master yang mahir dibidang pem-blogger-an, tapi admin hanya ingin berbagi mengenai apa yang admin pelajari.

Currently have 5 komentar:

  1. muhaimin says:

    coba dulu gan . . moa berhasil

  1. makasih atas kunjungan anda sobat...

  1. Siplah...ini bagus boleh juga untuk di coba nih....

  1. INTERNET OKE says:

    Oke saya mau coba dulu gan/.................

  1. Klik Mulai says:

    oke gan bagus ini menarik.... nih ada blog khusus ilmu gaib dan sejarah klik www.sriwijayacity.com

Leave a Reply

Posting Komentar

Silahkan meninggalkan komentar sobat,akan tetapi setidaknya Anda membaca tulisan saya terlebih dahulu dong.dan ingat SPAM,SARA,*** dengan terpaksa harus saya hapus,jadi jangan heran jika komentar anda tidak muncul, Semaksimal mungkin saya akan membalas komentar yang masuk di blog ini. Terimakasih!