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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqXTzp8j86zP15ijKqT0BNIh5R7xifkp54dLFDZM0yopdmRGjSqHZPEt5COflaCAaVGMbhpTj117399HI6cWzITn4EZ8aAzVQbCDMyYQXqFyNE78SmqcVyOj1VR_k7G4uS4TBtQp7F0EE6/" 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.
Diposting oleh di
Label:

25 komentar:

  1. Anonim9 Oktober 2010 pukul 18.36

    Waaa pelajaran baru nh ...

    Ntar q coba y ..thanks

    BalasHapus
  2. Indahnya Kebersamaan9 Oktober 2010 pukul 19.29

    Ok bos, thank ya friend atas infonya

    BalasHapus
  3. Unknown10 Oktober 2010 pukul 02.13

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

    BalasHapus
  4. Kerajaan Air Mata10 Oktober 2010 pukul 03.31

    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. aldy10 Oktober 2010 pukul 03.41

    Bisa diterapkan pada engine wordpress nggak?

    BalasHapus
  6. secangkir teh dan sekerat roti10 Oktober 2010 pukul 04.59

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

    BalasHapus
  7. sawali tuhusetya10 Oktober 2010 pukul 05.02

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

    BalasHapus
  8. Topi10 Oktober 2010 pukul 05.15

    Mantap sob , coba 2 ah , thanks ne :)

    BalasHapus
  9. DenBaGas10 Oktober 2010 pukul 05.39

    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. Manchester United Tech | Berita Sepak Bola10 Oktober 2010 pukul 05.42

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

    BalasHapus
  11. Tukang Gosip10 Oktober 2010 pukul 08.10

    bagus mas tipsnya...hehe

    BalasHapus
  12. Amdhas10 Oktober 2010 pukul 09.20

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

    BalasHapus
  13. penghuni6010 Oktober 2010 pukul 18.07

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

    BalasHapus
  14. Warna Tulisan10 Oktober 2010 pukul 18.19

    wah mantabs sahabat dapat meminimalisir space postingan, salam

    BalasHapus
  15. mengukur kecepatan loading blog10 Oktober 2010 pukul 19.28

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

    BalasHapus
  16. Stephanee10 Oktober 2010 pukul 19.41

    kirain tentang mobil

    BalasHapus
  17. tips seo, tips blogging, tips komputer10 Oktober 2010 pukul 19.56

    khusus blogspot ya? makasih ya infonya :)

    BalasHapus
  18. Iskandar Dzulkarnain10 Oktober 2010 pukul 21.08

    wah ... keren2 :D

    BalasHapus
  19. Usup Supriyadi10 Oktober 2010 pukul 22.28

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

    BalasHapus
  20. inspirat engels10 Oktober 2010 pukul 23.27

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

    BalasHapus
  21. Puspita11 Oktober 2010 pukul 00.50

    Terima kasih ilmunya.

    Salam kenal dari pinggir sungai bRantas.

    BalasHapus
  22. Sriyono Suke11 Oktober 2010 pukul 16.45

    wah asikkk... ntar kita coba deh...

    BalasHapus
  23. suri12 Oktober 2010 pukul 00.38

    terima kasih atas ilmunya sobat...

    BalasHapus
  24. review from us17 Oktober 2010 pukul 07.28

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

    BalasHapus
  25. bonusuang20 Juni 2011 pukul 09.43

    bagus postingnya... nambah ilmu nich gan. trims

    BalasHapus

Langganan: Posting Komentar (Atom)