Cara Membuat Tombol Spoiler atau Show Hide di Blog

Cara Membuat Tombol Spoiler atau Show Hide di Blog itulah tema artikel yang akan saya bagikan buat anda. Membuat tombol spoiler atau biasa disebut juga sebagai tombol show hide merupakan suatu alternatif dalam menghemat loading artikel di blog yang di buat karena berisi gambar yang banyak apalagi kita memiliki koneksi internet yang terbatas. Selain itu spoiler bisa digunakan untuk menyembunyikan gambar sehingga panjang artikel tidak terlalu ke bawah. 

Cara Membuat Tombol Spoiler atau Show Hide di Blog

Spoiler sendiri merupakan suatu script atau baris kode yang dipakai untuk menampilkan tombol yang ketika kita klik maka akan muncul sesuatu di dalamnya baik itu berupa gambar video atau link di dalamnya serta dapat juga berisi sebagian isi dari postingan yang dibuat tergantung apa yang orang ingin letakkan di dalamnya. Tujuan dari dibuatnya tombol spoiler ini untuk menghemat ruang dalam suatu postingan serta untuk mengurangi berat loading dari suatu blog ketika di buka apalagi yang memiliki banyak gambar dalam artikelnya.

Bagaimana Cara Membuat Tombol Spoiler atau Show Hide di Blog sangat mudah tinggal mengikuti langkah-langkah berikut ini :

1. Masuk pada akun blog anda.

2. kemudian buat artikel baru.

3. silahkan anda tulis artikelnya.

4. Setelah artikelnya jadi buka HTML bukan Compose yang ada pada bagian kiri atas tempat menulis artikel.

5. Masukkan kode berikut ini paling bawah atau sesuka anda dimana ingin meletakkannya.

<br /><div><div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Masukkan Judul </span></i><br/><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 </div></div></div></div>

Ket : Pada teks warna merah masukkan judul yang ingin anda tampilkan di dalam spoiler dan teks warna biru masukkan isi spoiler tersebut misalkan link, video, atau gambar. Video atau gambar masukkan url nya saja.

6. Silahkan pratinjau artikel anda dan lihat hasilnya.

7. Setelah itu silahkan publiksikan.

Contoh Spoiler saya buat seperti di bawah ini : 

Contoh Sopiler

Itulah tentang Cara Membuat Tombol Spoiler atau Show Hide di Blog Semoga bermanfaat buat anda.