Cara buat Daftar isi berbentuk tabel
Selain menu dropdown, daftar isi ini juga menggunakan scroll.. yang pasti sangatlah bagus untuk di pasang di gadget maupun di tampilan posting.
Untuk membuat daftar isi blog otomatis seperti di atas, kode yang digunakan adalah sebagai berikut :
1. Log in blog sobat
2. Masuk ke Dasbor > Tata Letak > Tambah Gadget > HTML/Javascript
<center>
<div style="-moz-box-shadow: inset 4px 4px 4px #404040; -webkit-box-shadow: inset 2px 2px 2px #404040; background: #ffff00; border: 10px double #000000; box-shadow: inset 2px 2px 2px #404040; color: black; float: center; font: normal 13px verdana; height: 350px; margin: 10px auto; overflow: auto; padding: 10px; text-align: left; text-shadow: 1px 1px 2px #fff; width: 320px;">
<div id="cl_option">
Masih loading mas bro/mba sis... sabar ya... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan =200;
</script>
<script src="https://sites.google.com/site/bloggerbugisdotkom/javascript/Dafatar_isi_Biasa_Bloggerbugis.js" type="text/javascript">
</script>
<script src="http://www.blog anda/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500" type="text/javascript">
</script>
<div style="color: black; float: right; font: normal 10px verdana; padding: 5px 0px; text-align: right; text-shadow: 1px 1px 1px #000;">
Widget by <a href="">XCreative</a></div>
</div>
</center>
<div style="-moz-box-shadow: inset 4px 4px 4px #404040; -webkit-box-shadow: inset 2px 2px 2px #404040; background: #ffff00; border: 10px double #000000; box-shadow: inset 2px 2px 2px #404040; color: black; float: center; font: normal 13px verdana; height: 350px; margin: 10px auto; overflow: auto; padding: 10px; text-align: left; text-shadow: 1px 1px 2px #fff; width: 320px;">
<div id="cl_option">
Masih loading mas bro/mba sis... sabar ya... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan =200;
</script>
<script src="https://sites.google.com/site/bloggerbugisdotkom/javascript/Dafatar_isi_Biasa_Bloggerbugis.js" type="text/javascript">
</script>
<script src="http://www.blog anda/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500" type="text/javascript">
</script>
<div style="color: black; float: right; font: normal 10px verdana; padding: 5px 0px; text-align: right; text-shadow: 1px 1px 1px #000;">
Widget by <a href="">XCreative</a></div>
</div>
</center>
Kode di atas bisa di edit untuk menyesuaikan tampilannya dengan tema blog anda.
Perhatikan kode yang
Perhatikan kode yang
- #ffff00 adalah kode warna background ( Warna Latar Belakang ) yaitu Kuning. Ganti kode tersebut dengan kode warna yang anda inginkan untuk mengganti warna background widget Daftar isi
- 320 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.
- black adalah warna tulisan hitam. Silahkan ganti dengan warna yang anda inginkan. Adapun warna Link yang ada di dalam widget, tergantung dari pengaturan CSS template anda.
- 10 adalah kode ketebalan garis pinggir widget, yaitu garis pinggir ganda ( double ) dengan ketebalan 10 piksel ( 10px ) . Ganti dengan angka 10 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
- #000000 adalah kode warna garis pinggir, ganti dengan kode warna yang anda inginkan.
- Masih loading mas bro/mba sis... sabar ya... 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.
- Yang terakhir dan paling penting adalah kode www.blog anda Ganti kode tersebut dengan URL / Alamat blog anda
- <center > dan </center> digunakan jika sobat menggunakan daftar isi di halaman postingan
Save dan silahkan di coba.....
Langganan:
Posting Komentar (Atom)
