Pages

Sabtu, Oktober 09, 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="http://lh4.ggpht.com/_2gmmRPmjmvY/TJIsAECRNkI/AAAAAAAAAYY/dPxxFhz9taM/walking.jpeg" 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.

25 komentar:

  1. Waaa pelajaran baru nh ...

    Ntar q coba y ..thanks

    BalasHapus
  2. Ok bos, thank ya friend atas infonya

    BalasHapus
  3. wahh keren . .
    jd kalo pake spoiler bisa ngehemat tempat postingan biar gk terlalu panjang, ,
    siph dahh , ntar ak cobain . .

    BalasHapus
  4. ide menarik sob, saya pernah pake tapi bukan di postingan, saya pake untuk menyembunyikan Buku tamu dan lain lain, trimaksih idenya sob

    salam hujan

    BalasHapus
  5. Bisa diterapkan pada engine wordpress nggak?

    BalasHapus
  6. gambrnya akan tetep loading kalo spoilernya gak dibuka ya..?

    BalasHapus
  7. konon spoiler bisa membikin bandwith tdk boros. sangat cocok utk menyembunyikan gambar atau postingan yang berukuran gede.

    BalasHapus
  8. Mantap sob , coba 2 ah , thanks ne :)

    BalasHapus
  9. Salam

    Dapet ilmu dari sini nih, kebanyakan yg memasang spoiler itu diluar postingan kawan tapi skg bisa diterapkan ya...
    Berkunjung dan silaturahmi sekalian menambah kawan...

    Salam kawan

    BalasHapus
  10. mantep infonya kawan, saya juga sdh pernah coba nih..
    sukses selalu!

    BalasHapus
  11. mantap sob terima kasih sudah berbagi.
    valuenya bisa di rubah kan?
    value="Lihat Gambar"

    BalasHapus
  12. thnks sob, aku save ya... udh lama aku pgn tau cara bikin spoiler

    BalasHapus
  13. wah mantabs sahabat dapat meminimalisir space postingan, salam

    BalasHapus
  14. wah baru ngerti namanya spoiler, dulu ngertinya script 'ciluk - baa' he he . makasih tipsnya :)

    BalasHapus
  15. wah, akhirnya saya bisa menemukan caranya,thank's :D

    BalasHapus
  16. selain menarik dan unik, juga tuk menghemat ruang...thanks infonya!

    BalasHapus
  17. Terima kasih ilmunya.

    Salam kenal dari pinggir sungai bRantas.

    BalasHapus
  18. wah asikkk... ntar kita coba deh...

    BalasHapus
  19. terima kasih atas ilmunya sobat...

    BalasHapus
  20. panjang sekali mas,
    seperti masukin [spoiler] ke phpbb :D
    thanks ilmunya

    BalasHapus
  21. bagus postingnya... nambah ilmu nich gan. trims

    BalasHapus