Membuat Berbagai macam Spoiler

November 25, 2012

Banyak jenis Browser seperti Mozilla, Chrome, IE, Opera, Safari Dll. Nah, diantara Browser2 tadi memiliki karakteristik berbeda, semua tergantung programmer si pembuat Browser dalam menuliskan Coding mereka. Karena perbedaan ini, maka kadang saat kita membuka salah satu web atau blog tampilannya bisa berbeda pula, tergantung hasil terjemahan coding dari Browser yang kita gunakan.

Sebagai contoh dalam penerapan kode CSS atau javascript untuk membuat Spoiler.
Ada banyak cara untuk membuat spoiler, tapi setelah aku amati antara sepoiler yang menerapkan koding murni javascript dan spoiler javascript + CSS, maka hasilnya lebih menarik Javasript+CSS, karena hampir semua Browser seragam dalam menterjemahkan perintah Codingnya. Kita tidak mungkin memaksa pengunjung blog yang datang dan membaca isi postingan harus menggunakan browser tertentu, mereka memiliki alasan sendiri mengapa memakai browser Mozilla bukan Chrome walaupun sama-sama browser misalnya.

Okey tidak usah banyak cerita,  ada dua koleksi koding untuk membuat menu spoiler. Koding yang pertama murni javascript sedangkan koding yang kedua javascript + CSS, dari keduanya memilki kekurangan dan kelebihan, tapi tujuannya sama, hanya beda tampilan saat diterjemahkan oleh browser yang sobat gunakan.

Spoiler dengan javascript :

1. Pilih New Post atau Entri Baru seperti membuat postingan biasa
2. Pilihlah pada mode HTM jangan Compose saat membuat postingan
3. Sisipkan kode script berikut ini :

Silahkan ganti Judul spoiler, buka, tutup, sesuai dengan selera sobat.
Kode Spoiler diatas akan menghasilkan tampilan seperti dibawah ini (tidak sempurna pada browser Chrome) :

Silahkan klik buka untuk mendapat bonus:
Ini merupakan isi spoiler, sobat bisa mengisinya dengan berbagai macam sesuai selera seperti teks, foto, animasi, film dan sebagainya.



Spoiler dengan javascript + Css

Sedangkan Spoiler yang kedua merupakan gabungan antara javascript dengan Css. Css untuk membentuk tampilan spoiler agar lebih menarik, tetapi fungsinya sama, jadi hanya beda ditampilan saja.
Buka edit HTML Salin kode ini, kemudian letakkan tepat di atas kode </head>


Masih di posisi edit HTML, selanjutnya Copykan code dibawah ini diatas kode  ]]></bskin>


Kemudian preview, jika tidak ada masalah silahkan di save

Untuk menerapkan pada postingan
1. Pilih New Post atau Entri Baru seperti membuat postingan biasa
2. Pilihlah pada mode HTM jangan Compose saat membuat postingan
3. Sisipkan kode script berikut ini :

<blockquote class="spoiler">
Letakan disini isi postingan baik  berupa teks, foto, film atau gambar animasi sesuai keinginan,
</blockquote>
Selesai dan lihat hasilnya.




Pernahkah anda mendengar bahwa orang Sunda dilarang menikah dengan orang Jawa atau sebaliknya? Ternyata hal itu hingga ini masih dipercaya oleh sebagian masyarakat kita. Lalu apa sebabnya?

Cara membuat spoiler ini sudah banyak diulas di google, postingan ini hanya sekedar catatan pribadi saja agar tidak lupa, tapi jika sobat kebetulan mampir dan tertarik dengan catatanku, silahkan sobat copy kode2 tersebut.

You Might Also Like

0 Comments

» Komentar anda sangat berguna untuk peningkatan mutu posting
» Terima kasih bagi yang sudah menulis komentar.

SUBSCRIBE NEWSLETTER

Get an email of every new post! We'll never share your address.

Flickr Images