Kali ini akan membuat sebuah tombol untuk menampilkan dan menyembunyikan dalam postingan blog, yang biasanya digunakan untuk membuat daftar isi agar tidak memakan ruang dalam postingan blog. Tombol ini mirip pada website kaskus spoiler... yang dapat show dan hide.
Sobat blogger dapat memasukan gambar, teks, link aktif dan daftar isi dalam postingan blog yang dapat di hide atau show sehingga postingan blog terlihat rapih. Jika sobat belum paham cara pemasangan nya baik kita bahas secara lebih detail.
Cara Membuat Tombol Show dan Hide Pada Postingan Blog
# Langkah 1: Cara Memasang Tombol Show & Hide
Pertama untuk memasang tombol seperti biasa harus masuk terlebih dahulu ke blogger.com kemudian sobat dapat masuk ke dalam dashboard. Kemudian buat halaman atau buat entri baru/postingam baru. Copy & Paste kode tombol Hide dan Show pada mode HTML untuk script dapat dilihat dibawah ini.
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Spoiler ... </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
=== Isi Spoiler Disini ===
</div></div></div></div>
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Spoiler ... </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
=== Isi Spoiler Disini ===
</div></div></div></div>
# Langkah 2: Hasil Penerapan Tombol Hide & Show
Hasil pemasangan tombol hide dan show dalam postingan dapat dilihat dibawah ini.
Spoiler ...
Note : Ganti ukuran width yang berwarna merah sesuai yang sobat inginkan, masukan spoiler di tulisan === Isi Spoiler Disini === .
Cara Membuat Daftar Isi Menggunakan Tombol Hide dan Show
# Langkah 1: Masukan Script Tombol Hide dan Show
Pertama untuk Cara Membuat Daftar Isi Dalam Postingan Blogspot setelah membuat daftar isi kemudian buat tombol hide dan show seperti diatas.
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Daftar Isi ... </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<ol>
<li><a href="#subjudul1">Cara Membuat Tombol Show dan Hide Pada Postingan Blog</a></li>
<li><a href="#subjudul2">Cara Memasang Tombol Show & Hide</a></li>
<li><a href="#subjudul3">Hasil Penerapan Tombol Hide & Show</a></li> <li><a href="#subjudul4">Cara Membuat Daftar Isi Menggunakan Tombol Show dan Hide</a></li>
</ol>
</div></div></div></div>
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Daftar Isi ... </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<ol>
<li><a href="#subjudul1">Cara Membuat Tombol Show dan Hide Pada Postingan Blog</a></li>
<li><a href="#subjudul2">Cara Memasang Tombol Show & Hide</a></li>
<li><a href="#subjudul3">Hasil Penerapan Tombol Hide & Show</a></li> <li><a href="#subjudul4">Cara Membuat Daftar Isi Menggunakan Tombol Show dan Hide</a></li>
</ol>
</div></div></div></div>
# Langkah 2: Hasil Penerapan Cara Membuat Daftar Isi Menggunakan Tombol Hide dan Show
Hasil cara membuat daftar isi hide & show pada blog dapat dilihat dibawah ini.
Daftar Isi ...
Seperti itu Cara Membuat Tombol Show dan Hide Pada Postingan Blog semoga membantu dan bermanfaat bagi kalian. Wassalamualaikum wr. wb.