Langsung aja gan, yang
akan saya share di artikel ini adalah daftar isi yang bekerja secara
otomatis
tanpa perlu memasukkan link artikel satu persatu ke dalammya. Yang
membuatnya lebih menarik,
gadget Daftar Isi Blog ini di lengkapi
dengan menu drop down untuk memudahkan pengunjung memilih jenis artikel yang
akan di tampilkan oleh
daftar isi blog ini.
Untuk penampakannya anda bisa lihat
daftar isi saya yang ane taruh di sidebar dengan judul “Daftar Isi” Keren kaaan
Okeee,, Bismilah dulu ya....
Untuk membuat daftar isi
blog otomatis seperti di atas, kode yang digunakan adalah sebagai berikut :
<div style="background: #f2f2f2;
width: 320px; color: #000;
float: center; font: normal 13px verdana; height: 350px;
margin: 10px auto; overflow: auto; padding: 10px; text-align: left;
text-shadow: 1px 1px 2px #fff; border:4px double #ccc; -moz-box-shadow: inset 2px 2px 2px #404040;
-webkit-box-shadow: inset 2px 2px 2px #404040;box-shadow: inset 2px 2px 2px
#404040">
<div id="cl_option">
Bentar ya.... lagi ngumpulin datanya.....
</div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan =200;
</script>
<script type="text/javascript"
src="https://sites.google.com/site/bloggerbugisdotkom/javascript/Dafatar_isi_Biasa_Bloggerbugis.js">
</script>
<script type="text/javascript" src=" http://www.raiz-ahmad.blogspot.com
/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500">
</script>
<div style="float:right;font:normal 10px verdana;
color:#ccc;text-align:right;padding:5px 0px;text-shadow:1px 1px 1px
#000"></div> </div>
Kode di atas bisa di edit untuk menyesuaikan tampilannya dengan tema blog anda.
Perhatikan kode yang berwarna merah !!!
- f2f2f2
adalah kode warna background ( Warna Latar Belakang ) yaitu Abu -
Abu. Ganti kode tersebut dengan kode warna yang anda inginkan untuk
mengganti warna background widget Daftar Isi Otomatis.Untuk melihat kode
warna HTML, silahkan klik disini "kode warna html"
- 320px
adalah Kode lebar widget. Ganti dengan angka yang lebih besar untuk
membuat widgetnya lebih lebar atau ganti dengan angka yang lebih kecil
untuk membuat widgetnya lebih sempit. Misalnya 300px atau 350px.
- 000
adalah kode warna tulisan yaitu hitam. Silahkan ganti dengan warna
yang anda inginkan. Adapun warna Link yang ada di dalam widget, tergantung
dari pengaturan CSS template anda.
- 4px
double adalah kode ketebalan garis pinggir widget, yaitu garis
pinggir ganda ( double ) dengan ketebalan 4
piksel ( 4px ) . Ganti dengan angka 4 yang
lebih besar atau lebih kecil. untuk membuat hanya 1 garis pinggir, ganti double dengan solid,
untuk membuat garis pinggir putus - putus, ganti dengan dashed
- ccc
adalah kode warna garis pinggir, ganti dengan kode warna yang anda
inginkan.
- Bentar ya.... lagi ngumpulin datanya..... adalah kalimat yang di tampilkan jika
widgetnya belum terbuka karena halaman masih loading. Silahkan ganti
dengan kalimat yang anda inginkan.
- 500
adalah jumlah maksimal judul artikel yang akan di tampilkan di
dalam widget daftar isi otomatis. Ganti dengan angka yang lebih besar atau
lebih kecil. Pada live demo yang anda lihat di atas, saya hanya
menggunakan 15.
- Yang terakhir dan paling
penting adalah kode http://www.raiz-ahmad.blogspot.com.
Ganti kode tersebut dengan URL / Alamat blog anda
Dengan mengedit semua kode di atas, anda akan memiliki daftar
isi blog yang sesuai dengan tema warna dan daftar isi dari blog anda.
Widget ini dapat dipasang pada sidebar blog atau halaman
artikel blog anda. Kalo belum tau caranya baca penjelasan dibawah ini :
1. Pasang
Daftar Isi Blog Otomatis di Laman atau Halaman Artikel
Untuk memasang daftar isi
otomatis pada Laman Baru atau Halaman Posting ( artikel ), silahkan masuk ke
Post Editor blogspot sama seperti jika ingin membuat artikel. Pada halaman Post
Editor, pilih mode HTML lalau paste kode Daftar Isi Blog Otomatis.
Untuk membuat widgetnya berada di tengah halaman, tambahkan kode <center> sebelum kode Daftar Isi lalau tambahkan
kode </center> di bawah kode daftar isi
sehingga kodenya akan terlihat seperti ini :
<center>
Kode Daftar Isi Blog Otomatis
</center>
Setelah selesai, jangan lupa publish / terbitkan seperti artikel biasa.
2. Pasang
Daftar Isi Blog Otomatis Pada Sidebar Blog
Untu memasang daftar Isi Blog Otomatis pada sidebar blog,
silahkan masuk ke halaman TATA LETAK
>>> Klik Tambah Gadeget >>> Pilih
HTML/JavaScript >>> Copy Paste kode Daftar Isi ke kotak
HTML/JavaScript >>> Klik Simpan.
Naah …sekarang dah jadi kan daftar
isi otomatisnya….
Sekian dari ane, indahnya berbagi
dan semoga bermanfaat..
