andreasandre . net andreasandre .net | sekedar tempat untuk berbagi | Blog Terbaik

Membuat spoiler di blog wordpress

09.13.2010 · Posted in internet dan blog

Pada postingan sebelumnnya saya memamerkan foto sepatu buluk saya untuk lomba. Saya memasukkan beberapa foto ke postingan saya, tetapi saya juga tidak ingin postingan menjadi panjang. Akhirnya saya menemukan cara untuk mensiasati, yaitu dengan menggunakan spoiler.

"spoiler"

gambar : 1.bp.blogspot.com

Spoiler adalah …

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari posting, dengan tujuan untuk menghemat space halaman posting. Biasanya yang disembunyikan dalam spoiler adalah berupa gambar.

Cara memasang spoiler

  1. Buat postingan baru add new post, dan pilih mode HTML (seperti ditunjukkan pada gambar)
  2. Masukkan kode berikut ini
<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="buka dunk" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">

Teks yang akan disembunyikan di spoiler, semoga tips ini membantu

</div>
</div>
</div>

hasilnya akan seperti ini :

Jika ingin menyisipkan gambar ke dalam spoiler, kita hanya perlu memasukkan kode ini, dan meletakkannya di bagian berwarna merah pada kode di atas

<img src="http://alamat_gambar.jpg" alt="gambarA" width="300" height="400" />

jika ingin mengubah tulisan spoiler == tulisan  “buka dunk”, bisa mengedit pada bagian coding berwarna biru

semoga tips berbagi saya berguna :D dan silahkan di share dengan menekan tombol ini [fb]

info bermanfaat lainnya :

[adsensecamp]

116 Responses to “Membuat spoiler di blog wordpress”

  1. wah,,thanks gan,infonya,,,

    Reply

  2. Bagus mas artikelnya, saya kira harus pake plugin, ternyata tidak hehehe….
    FajaR recently posted..Notepad++ Multy Language Editor

    Reply

    andre Reply:

    kalo pake plugin juga ada mas Fajar, cuma menurut saya bikin space hosting tambah berat aja.

    Reply

  3. Ini nih yang gue cari-cari..
    Thanks tipsnya :D

    Reply

    andre Reply:

    dicoba aja mas.

    Reply

  4. kenapa ga pake plug in aja mas?
    frezy prima ardi recently posted..Akibat Ngotak-Ngatik Theme WordPress

    Reply

    andre Reply:

    kalo saya sih ga di setiap artikel pake spoiler mas, space hosting saya terbatas, jadinya saya pilih pake coding aja.

    Reply

  5. salken Gan..
    ilmunya langsung dipraketin nih..
    buat bikin testi dari kaskus pindah ke blog…

    Tq shareya..
    jempol 2.. :D
    trijokobs recently posted..9power FAQ

    Reply

    andre Reply:

    sip mas Tri, silhakan dicoba. smoga beguna untuk blognya.

    Reply

  6. Mas, itu biar klo pas posisi terbuka spoilernya tertulis “tutup lagi” bagaimana..?
    ~MHC~ recently posted..Ubuntu Release History

    Reply

  7. Setalah search google mencari cara membuat spoiler akhirnya sampai juga ke halaman ini. Makasih infonya mas… :)
    baba recently posted..Candlestick Pola Three Outside Down Bearish

    Reply

    andre Reply:

    sama-sama mas. makasi udah berkunjung ke sini.

    Reply

  8. Ga bisa T.T
    Ini ga sekedar kopas ya? Ada yang spasinya butuh dihapus atau

    Reply

    andre Reply:

    nyoba nya di wordpress.com ya? soalnya kalo di wordpress.com ga diperbolehkan pasang script.

    Reply

Leave a Reply

CommentLuv badge

Anda Pasti Suka Artikle Iniclose