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
-
Mari Kita Bahas Cara Membuat Judul BloG / Web Bergerak
-
di matamu aku bukan siapa2, bukan teman, sahabat, bahkan saudara melainkan orang asing. namun biarlah orang asing ini singgah sejenak... -
Sobat pembaca yang saya banggakan, kali ini saya ingin mengulas sebuah artikel yang saya dapatkan dari saudara saya Ahsan Arif, dalam tert... -
Setelah beberapa bulan ini vakum ngeblog, blog-triks akhirnya bisa kembali menghirup segarnya udara dunia blog.Dan kali ini,sesua... -
Blog walking ke blog teman memang selalu ada manfaatnya. Makanya saya bilang Blog Walking itu Cantik .
0 komentar:
Posting Komentar