Skip to main content

Cara Membuat Daftar Isi di dalam Spoiler (Script)

Bingung mau buat artikel tentang apa. hmmmmmmm.. Ok, topik yang saya pilih kali ini adalah bagaimana cara membuat daftar isi di dalam spoiler??
Menurut saya daftar isi itu sangat penting. Mengapa? Karena jika tidak ada daftar isi, maka pembaca/pengunjung di blog anda akan bingung dan tersesat ke dalam lembah kegelapan antah berantah, haha. Seperti pada gambar disamping, daftar isi ibarat penunjuk arah (kompas), jika tidak tau arah maka kita pun tersesat.

Langsung aja kita masuk ke topik, tidak usah panjang lebar lagi. Ikuti saja langkah dibawah ini dengan baik dan benar, tidak boleh mencontek ya! hehe

1. Login akun blogger anda, dasbor > rancangan > elemen laman. lihat gambar:

2. Klik tambar gadget seperti pada gambar.

3. Pilih HTML/JavaScript, lihat gambar:

4. Judulnya dikosongkan, kontennya diisi dengan script di bawa ini:
<div>
    <div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <i><span style="font-weight: bold;"></span></i><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Daftar Isi'; }" style="color:#fff; font-size: 22px; margin: 0px; padding: 0px; width: 510px;" type="button" value="Daftar Isi" /></div>
    <div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
    <div style="display: none;">

<div style="border: 2px dashed rgb(255, 255, 255);
overflow: auto;
width: 490px;
height: 300px;
text-align: left; padding: 5px;">

<script src="http://sektim-project.googlecode.com/files/daftar-isi-ala-sektim.js">

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

5. Tulisan yang berwarna kuning boleh anda ganti sesuai kemauan anda. Angka yang berwarna kuning adalah panjang dan lebar, sedangkan tulisan yang berwarna kuning adalah judul spoiler.

6. Setelah selesai klik Preview, jika sudah mantap baru Save template. Anda bisa meletakkan daftar isi di bagian sidebar atau dimanapun anda mau. Selamat mencoba!

Comments

  1. terus gimana caranya menampilan isi blog didaftar isi bos?saya masih newbie...trims banyak scriptnya,mohon dibalas.

    ReplyDelete
    Replies
    1. Coba diikuti dulu langkahnya gan,
      bingungnya dmn?

      Delete
  2. woi, kok pas gue copy yg kluar daftar isi loe gan?

    ReplyDelete
    Replies
    1. Link yang warna kuning diganti dulu dgn situs agan

      Delete

Post a Comment

Popular posts from this blog

MouseFix: Solusi Mengatasi Mouse Sering Double Klik

Banyak orang sering megeluh karena mouse yang digunakan tidak berfungsi dengan baik, salah satunya ialah masalah double klik. Masalah ini sering kita jumpai ketika kita sedang menggunakan mouse terlebih bila mouse tersebut sudah cukup lama digunakan. Hal ini tentunya sangat mengganggu pengguna komputer, apalagi gamer seperti saya.

Arti Angka pada Seri VGA NVidia dan AMD/ATI Radeon

VGA (Video Graphics Array) adalah salah satu komponen utama penyusun komputer maupun laptop. Ketika membeli laptop atau merakit komputer, jenis/tipe VGA adalah salah satu hal yang paling penting diperhatikan. Hal ini tentu saja supaya komputer/laptop yang akan dipakai nantinya bisa sesuai dengan keperluan kita, terutama untuk keperluan gaming jangan sampai salah pilih VGA.

15 Efek Keren Photoshop serta Cara Membuatnya

Belajar Adobe Photoshop memang sangat menyenangkan bagi banyak orang. Bukan hanya para desainer, tetapi banyak orang biasa bisa menguasainya. Adobe Photoshop mempu mengedit foto menjadi menakjubkan serta ia mampu menciptakan efek luar biasa pada foto buatan. Tangan yang ahli dan memiliki jiwa seni adalah hal yang dibutuhkan.