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
gimana ni?merasa tertarik?kalo ya,saya akan ngajarin kamu cara ngebuatnya,perhatikan dengan baik..
Cssnya Sudah Dirapatkan Sedikit..
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...
- Login Ke Blogger.
- Masuk Ke Rancangan Lalu Edit HTML.
- Cari Kode Di Bawah Ini
- ]]>Lalu
- 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:
</head> atau head
Langkah 7.
<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&alt=json-in-script&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.
Assalamualaikum,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.
coba dulu gan . . moa berhasil
makasih atas kunjungan anda sobat...
Siplah...ini bagus boleh juga untuk di coba nih....
Oke saya mau coba dulu gan/.................