Kali ini akan menciptakan sebuah tombol untuk menampilkan dan menyembunyikan dalam postingan blog, yang biasanya dipakai untuk menciptakan daftar isi biar tidak memakan ruang dalam postingan blog. Tombol ini menyerupai pada website kaskus spoiler... yang sanggup show dan hide.
Sobat sanggup memasukan gambar, teks, link aktif dan daftar isi dalam postingan blog yang sanggup di hide atau show sehingga postingan blog terlihat rapih. Jika sahabat belum paham cara pemasangan nya baik kita bahas secara lebih detail.
Cara Membuat Tombol Show dan Hide Pada Blogspot
# Langkah 1: Cara Memasang Tombol Show & Hide
Pertama untuk memasang tombol menyerupai biasa harus masuk terlebih dahulu ke blogger.com lalu sahabat sanggup masuk ke dalam dashboard. Kemudian buat halaman atau buat entri baru. Copy & Paste kode tombol Hide dan Show pada mode HTML untuk script sanggup 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 sanggup dilihat dibawah ini.
Spoiler ...
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 menciptakan daftar isi lalu buat tombol hide dan show menyerupai 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="#subjudul-1">Cara Membuat Tombol Show dan Hide Pada Blogspot</a></li>
<li><a href="#subjudul-2">Cara Memasang Tombol Show & Hide</a></li>
<li><a href="#subjudul-3">Hasil Penerapan Tombol Hide & Show</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="#subjudul-1">Cara Membuat Tombol Show dan Hide Pada Blogspot</a></li>
<li><a href="#subjudul-2">Cara Memasang Tombol Show & Hide</a></li>
<li><a href="#subjudul-3">Hasil Penerapan Tombol Hide & Show</a></li>
</ol>
</div></div></div></div>
# Langkah 2: Hasil Penerapan Cara Membuat Daftar Isi Menggunakan Tombol Hide dan Show
Hasil cara menciptakan daftar isi hide & show pada blog sanggup dilihat dibawah ini.
Daftar Isi ...