Selasa, 08 Mei 2012
Cara membuat Spoiler di Blog
Kali ini Saya akan membahas tentang "Cara membuat Spoiler di Blog".apa itu Spoiler?.Spoiler adalah sebuah tombol yang bila diklik akan terbuka isinya.Spoiler biasa digunakan di sebuah forum dan sebagainya.Sebuah spoiler biasa diisi dengan sebuah gambar,tulisan,video atau semacamnya tujuannya agar tidak terlalu berat dan terlihat rapi.Masih belum tau apa itu spoiler?
ini contohnya
contoh diatas itu contoh yang backgroundnya transparan
kalau mau backgroundnya berwarna ini contohnya (misal background oranye)
penasaran kan gimana cara bikinnya?
oke langsung aja kita mulai tapi sebelum itu follow blog saya dulu ya
kalo udah langsung aja tanpa basa-basi kita mulai tipsnya:tapi sebelum itu saya jelaskan dulu
spoiler ini bisa ditaruh di postingan ataupun "Html/Javascript" terserah anda ingin menaruhnya dimana kalau ingin ditaruh dipostingan taruh di bagian edit html seperti disamping.Kalau ingin ditaruh di sidebar (html/javascript) caranya seperti dibawah ini
1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML Java/Script
6.Masukkan kodenya
7.Simpan
KODENYA SPOILER :
<div id="spoiler">
<div><input type="button" value="Tampilkan"
style="margin:0px;padding:0px;" 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 = 'Sembunyikan';
} else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Tampilkan Lagi'; }">
</div>
<div style="background: #00ffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
isi spoiler
</div>
Keterangan:
-kode yang berwarna hijau bisa anda ganti sesuai keinginan anda contoh :buka,show dan sebagainya
-kode yang berwarna kuning bisa anda ganti sesuai keinginan anda contoh :tutup,hidden dan sebagainya
-kode yang berwarna merah bisa anda ganti sesuai keinginan anda contoh :buka lagi,show again dan sebagainya
-kode yang berwarna biru muda (cyan) adalah kode background untuk spoiler yang berwarna biru muda anda bisa menggantinya sesuai keinginan anda (Jika anda ingin membuatnya transparan ganti kode tersebut dengan tulisan transparent)
- -kode yang berwarna biru adalah isi untuk spoiler
selamat mencoba
Langganan:
Posting Komentar (Atom)
About Me
Entri Populer
-
Sebelumnya : Fairy Tail Chapter 302 Lima Juli, sehari hari sebelum hari terakhir Daimatou Enbu, di tempat kediaman Fairy Tail ... "...
-
"Mari kita jelaskan lagi peraturannya, kapoh. Ketika para peserta saling bertemu di Kota, mereka bertarung. Satu poin untuk tim yang... -
1. Ayah ingin anak-anaknya punya lebih banyak kesempatan daripada dirinya, menghadapi lebih sedikit kesulitan, lebih tidak tergantung pa...
0 komentar:
Posting Komentar