Saturday, October 9, 2010

Cara Membuat Spoiler di Blog

Cara, Membuat, Spoiler, di, BlogTeras Info - Pada pagi hari yang cerah ini, akhirnya saya mendapat ide juga untuk postingan untuk tutorial blog di blog saya ini.
Sambil iseng-iseng ngenet....eh tiba-tiba saja terpikir oleh saya,"Wah kira-kira bikin tutorial apalagi ya....?O..ya, bikin SPOILER aja deh....".he..he..he...

Spoiler itu apa sih? spoiler adalah suatu button yang di gunakan untuk menampilkan ataupun menyembunyikan image/gambar atau text.

Untuk contohnya silahkan lihat di bawah ini, kemudian coba klik Lihat Gambar.


Nah, setelah di klik, apa yang terjadi sobat blogger semua, tiba-tiba langsung muncul sebuah image dengan teks di atasnya.

Lalu bagaimana Cara Membuat Spoiler di Blog.
Silahkan sobat ikuti beberapa langkah sederhana di bawah ini:

1. Silahkan buat dulu postingan yang ingin di pasangi spoiler
2. Silahkan masukan kode di bawah ini pada postingan artikel kita.

<div id="spoiler"><div><input style="margin: 10px; padding: 0px; height: 20px; font-weight: bold;" value="Lihat Gambar" onclick="if (this.parentNode.parentNode.getElementsByTagName('div') ['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div') ['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div') ['hide'].style.display= 'none'; this.innerText = ''; this.value = 'Tutup Gambar'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display= ''; this.innerText = ''; this.value = 'Lihat Gambar'; }" type="button"><div id="show" style="border: 5px none ; padding: 2px; display: none; width: 90%;">
<b>Blogger dan Blogwalking</b>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9WjC__iKLbIcXjdY7qqRWHtlSG10CQoO8_hM9H1zMidWeVoKV1-qW5hUM61p6pacIIAD5VVLFLGlGVlloVyzaEgrxSFqL7_F7GhVbXhLi1FVtbDwcD1XizjIgVuMAuOjsyk2bjWUtiylL/" alt="Cara, Membuat, Spoiler, di, Blog" a="" />
</div><div ></div></div></div>



Pada bagian yang saya beri warna biru, silahkan ubah dengan alamat gambar kita masing-masing. Kemudian pada bagian yang saya beri warna merah, silahkan ubah dengan teks sesuai keinginan.

Setelah selesai, silahkan sobat coba untuk menerbitkan artikelnya. Kemudian lihat hasilnya.

Selamat mencoba dan sukses selalu dengan blognya.

0 comments:

Post a Comment

 

Alif Ilmu | Tutorial Multimedia Online Copyright © 2011 | Template design by O Pregador | Powered by Blogger Templates