cara membuat tombol show hide pada blog



Artikel kali ini saya akan membahas Cara Membuat Spoiler atau tombol Show - Hide di Blog. Spoiler adalah script atau baris perintah kode yang dipakai untuk menampilkan tombol yang ketika di klik akan mengeluarkan menu pulldown. Biasanya digunakan untuk menyimpan suatu link atau Spoiler link, Spoiler teks, Spoiler gambar, seluruh atau sebagian isi dari postingan blog dll dengan menggunakan kode html atau yang lainnya yang sifatnya opsional dapat dilihat atau tidak. Fungsinya yaitu untuk menghemat ruang dalam suatu postingan atau sidebar. 

Keuntungan lain menggunakan Spoiler bisa mengurangi waktu loading blog kita. jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Spoiler juga bisa digunakan untuk menyembunyikan video agar loadingnya tidak berat
Cara Membuat Spoiler atau tombol Show - Hide di Blog :
1. Masuk ke akun blogger kita masing-masing.
2. Pada saat kita ingin membuat postingan blog,pilih edit HTML bukan compose.
3. Masukankode HTML berikut:


<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>



4. Ganti teks (masukkan judul warna biru) yang berwarna merah dengan judul yang di inginkan.
5. Ganti ( Isi spoiler warna biru)dengan isi yang di inginkan. Misal ingin memasukkan gambar, ganti dengan URL gambarnya.


Related Posts:

  • Tips Mengajar Bahasa Inggris anak-anak bagi guru non Bahasa InggrisBahasa Inggris dewasa ini marak diajarkan mulai dari sekolah dasar. Mata pelajaran ini dijadikan muatan lokal yang dapat diajarkan di SD sesuai dengan anjuran dari Pemerintah. Umumnya Bahasa Inggris menurut anjuran pemerintah… Read More
  • MotivasikuJANGAN HANYA TERMENUNG MENYESALI APA YANG TELAH TERJADI DAN MENGHARAPKAN AKAN DATANGNYA KEAJAIBAN DUNIACEPAT BANGKIT DAN BERDIRI SEMUA TAK BERAKHIR DISINIADA KEMAUAN PASTI ADA JALAN !!!Salam Bang Dayat.… Read More
  • Alasan Untuk Mencintai SeseorangSumber GambarUntuk mengucapkan kata cinta kepada seseorang itu tidak semudah yang kita bayangkan, tidak hanya sekedar mengucapkan AKU CINTA PADAMU, akan tetapi harus di sertai bukti dan alasan yang jelas mengapa kita harus me… Read More
  • Download Cerita Bahasa Inggris Anak : "The Greatest Treasure"Story telling is one of the interesting method in teaching English for children. I really thank to BookBox who shares free PDF files containing English story for Indonesian students to learn English. Because of you now I can … Read More
  • SOAL BAHASA INGGRIS SD ONLINE TERBARU, NUMBER PART IIIBuat anak-anaku tercinta, yang sedang belajar Bahasa Inggris di Sekolah Dasar. Kali ini saya ingin berbagi soal Bahasa Inggris online. kalian dapat menggunakan fasilitas ini untuk mengukur kemampuan kalian tentang angka-angka… Read More