6 Cara Membuat daftar isi pada widget / sidebar blog

Karena masih banyak orang mengeluhkan bagaimana cara membuat daftar isi pada widget atau sidebar secara sederhana dan mudah dimengerti pemula (newbie), namun tidak muncul pada widget atau beberapa saat kemudian Daftar Isi-nya jadi kosong alias tidak amapu mengakses isi blog kita.

Biasanya sang pemula, hanya bersifat co-pas, padahal widget tersebut menggunakan java script orang lain, maka jika suatu ketika blog orang tersebut terkena suspend atau java script-nya dihapus atau rusak, maka dengan sendirinya Daftar Isi kita tidak mampu membaca lagi hasil postingan kita.

Kali ini saya akan memberikan beberapa macam java script Daftar Isi, silahkan dicoba satu persatu, dan pilih mana yang dirasa paling sesuai.

---

DAFTAR ISI vers-1

1. Log in ke akun blog sobat.
2. Pada dashboard blogger, klik Tata Letak (layout).
3. klik Tambah gadget (add gadget) --> HTML/Javascript
4. Silakan beri judul pada widget.
5. Copy dan pastekan html - script dibawah ini ke dalam kotak javascript.

---

Catatan: Jika sudah ada widget terdahulu namun daftar isi-nya tidak muncul, tinggal klik saja gadget tersebut, lalu hapus script/html yang lama dan pastekan dengan html yang anda pilih

---

<div style="background:#FFFFFF; no-repeat scroll 0 0; border:1px solid #272622; color:##110B26; height:400px; overflow:auto; padding:10px; width:100%;">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 200;
</script>
<script src="http://tateluproject.googlecode.com/files/DaftarMenuOtomatis.js">
</script>
<script src="http://colomero.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=999">
</script></div>

Ket:

• Background:#FFFFFF; border:2px solid #272622; adalah warna yang bisa diganti disesuaikan dengan blog anda
• height:400px; dan width:260px; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
• Url ini : "http://colomero.blogspot.com/ silahkan ganti dengan url blog anda.

6. Lalu save atau simpan.

---

DAFTAR ISI vers-2

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

 <div style="background-color: transparent; border: 1px solid #ACC3E2; height: 300px; width: 100%;overflow: auto; ">
<script src="http://sites.google.com/site/itinformationclub/daftar_isi.js"></script>
<script> var numposts = 1000; var showpostdate = false; var showpostsummary = false; var numchars = 100; var standardstyling = true; </script>
<script src=""http://nugarro.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>
</div>

Ket:

• Background-color: transparent; border:2px solid #272622; adalah warna yang bisa diganti disesuaikan dengan warna blog anda
• height: 300px; dan width: 100%; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
• Url ini : "http://nugarro.blogspot.com/ silahkan ganti dengan url blog anda.

6. Lalu save atau simpan.

---

DAFTAR ISI vers-3

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<div style="border: 1px solid #cccccc;  margin: auto; overflow: auto; padding: 3px; text-align: left; height: 400px;width: 100%;">
<div align="center">
<span style="font-size: medium;">Myblog Contents</span></div>
<script src="http://julak-project.googlecode.com/files/dafisiscroll%20.js">

</script><script src="http://colomero.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Ket:

• border: 1px solid #cccccc; adalah warna yang bisa diganti disesuaikan dengan blog anda
• height: 400px;width: 100%; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
• Myblog Contents bisa diganti sesukanya
  
• Url ini : "http://colomero.blogspot.com/ silahkan ganti dengan url blog anda.

6 . Lalu save atau simpan.

---

DAFTAR ISI vers-4

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<div style="overflow:auto;height:250px;padding:10px;border:1px solid #eee"><script src="https://html-scripts.googlecode.com/files/feeds.js"></script>
<script src="http://eppoh.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

</div>

• Ganti Alamat eppoh.blogspot.com dengan url / alamat blog anda.
• Ganti https://html-scripts.googlecode.com/files/feeds.js dengan kode daftar isi dibawah ini :
  
1. Berdasarkan Label :
   https://html-scripts.googlecode.com/files/feeds-labels.js
2. Berdasarkan Tanggal :
   https://html-scripts.googlecode.com/files/feed-dates.js
3. Berdasarkan Artikel terbaru :
   https://html-scripts.googlecode.com/files/feeds.js

6. Klik tombol SAVE. Lalu lihat hasilnya di Blog.

---

DAFTAR ISI vers-5

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_default-theme.css" type="text/css" />
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://nama_blog.blogspot.com",
    postsPerPage   = 10,
    numChars       = 370,
    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.

Pengaturan

Opsi	Nilai	Keterangan
showPostDate	true	Ganti nilainya menjadi false jika Anda tidak ingin menampilkan bulan terbit artikel.
	false
showComments	true	Ganti nilainya menjadi false jika Anda tidak ingin menampilkan jumlah komentar pada artikel.
	false
idMode	true	Jika bernilai true, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai false sistem penanggalan artikel akan berubah menjadi berbahasa Inggris.
	false
sortByLabel	true	Digunakan untuk memfilter artikel/posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai true. Setelah itu tentukan nama label pada variabel labelSorter.
	false
labelSorter	"JavaScript", "Widget", ... (nama label)	Tentukan nama label jika opsi sortByLabel bernilai true.
totalPostLabel	"Jumlah posting:", ... (teks)	Tentukan keterangan jumlah posting (yang di bawah navigasi).
jumpPageLabel	"Halaman", ... (teks)	Tentukan keterangan lompatan posting (yang di bawah navigasi).
commentsLabel	"Komentar", "Comments", ... (teks)	Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
rmoreText	"Baca Selengkapnya", "Read More", ... (teks)	Digunakan untuk menentukan label link menuju posting asli.
prevText	"Sebelumnya", "Previous", ... (teks)	Digunakan untuk menentukan label navigasi mundur.
nextText	"Berikutnya", "Next", ... (teks)	Digunakan untuk menentukan label navigasi maju.
siteUrl	(URL Blog)	Ganti URL ini dengan URL blog Anda.
postsPerPage	10, 30, ... (numerik)	Digunakan untuk menentukan jumlah posting yang tampil pada satu halaman.
numChars	100, 200, ... (numerik)	Digunakan untuk menentukan jumlah karakter ringkasan posting.
imgBlank	no-image.jpg (URL Gambar)	Gambar cadangan jika posting yang tampil tidak memiliki gambar.

---

DAFTAR ISI vers-6

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<div style="border: 1px solid #000000; height : 350px; overflow : auto; padding : 5px; width: auto;"> <script src="https://sites.google.com/site/dhany99487/widget/daftar isi otomatis.js"></script> <script src="http://colomero.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>

Ket:

• border: 1px solid #cccccc; adalah warna garis tepi bisa diganti disesuaikan dengan blog anda
• height : 350px dan width: auto; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
• Url ini : "http://colomero.blogspot.com/ silahkan ganti dengan url blog anda.

6 . Lalu save atau simpan.


sumber:
dte.web.id
eppoh
emmahandoko