Home » , , » Cara Membuat Spoiler atau tombol Show - Hide di Blog

Cara Membuat Spoiler atau tombol Show - Hide di Blog

Written By Syahrullah Syam on Sabtu, 31 Desember 2011 | Sabtu, Desember 31, 2011

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) yang berwarna merah dengan judul yang di inginkan.
5. Ganti Isi spoiler dengan isi yang di inginkan. Misal ingin memasukkan gambar, ganti dengan URL gambarnya.

Hasilnya :

CONTOH SPOILER


KISS ME
semoga artikel Cara Membuat Spoiler atau tombol Show - Hide di Blog bermanfaat bagi anda

Share this article :
 
Support : Amalkan Ilmu Berbagi Untuk Semua | Blog SEO Arul
Copyright © 2013. Amalkan Ilmu Berbagi Untuk Semua - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger