Membuat Spoiler Image dan Text

Membuat Spoiler Image dan Text maksudnya adalah ketika pengunjung klik Read more, maka akan menampilkan gambar dan text yang tersembunyi, kemudian sebaliknya untuk menyembunyikan. Gunanya untuk memperkecil tinggi halaman pada website, sehingga meudahkan pengunjung untuk memilih sub-bab yang mereka inginkan.

Lihat contoh Spoiler Image dan Text dibawah ini :
Orang yang terkaya adalah orang yang menerima pembagian takdir dari Allah dengan senang hati, apapun yang terjadi dalam harimu yakinlah bahwa semuanya adalah kehendak dan rencana Allah untuk kebahagiaanmu.
Hanya orang-orang yang tahu persis bagaimana cara dia kelak mati saja yang mengerti bagaimana seharusnya hidup. Cintailah dan Hargailah orang tua kita. Kita sering begitu sibuk untuk tumbuh dewasa, namun kita lupa mereka juga bertambah tua.
Contoh spoiler imege dan text:

Berhentilah memikirkan masa lalu. jangan terus mengingat-ingatnya ; Jalani hidup anda dengan antusias. Mulailah sekarang juga!!!, berusahalah sebaik mungkin!, Kerahkan semua daya upaya maka kehidupan anda akan berlimpahan.

Membuat Sopiler Image dan Text :
Silakan copy dulu kode script ini dan paste pada Notepad


Edit dulu dengan Notepad atau Dreamweaver » pada "Buka/ tutup" kodenya adalah value="Buka/ tutup" style="margin: 0px; padding: 0px; width: 99px; font-size: 12px; jika Anda akan mengganti text yang lebih panjang maka rubah ukuran width: 99px sesuai jumlah karakter misal 120px.

Edit warna border » pada style="border:#c9c9c0 1px solid; -- misal rubah warna misal menjadi merah style="border:#fe040a

Rubah ukuran kotak sesuai dengan ukuran halaman post Anda » style="border:#c9c9c0 1px solid; margin: 0px; padding: 5px; width: 540px; -- misal rubah menjadi width: 500px

Rubah warna kotak sesuai background color halaman Anda » style="border:#c9c9c0 1px solid; margin: 0px; padding: 5px; width: 540px; background-color:#efefe7 -- misal rubah menjadi #765d5e

Unggah image ukuran lebar 530x150px pada Laman, misal judul laman: images
Klik Add selected image » alignment= None dan image size= Original size

Klik pilihan edit= HTML, copy url image tersebut » misal:

Klik Update

Kembali ke dashboard, klik Edit dibawah judul halaman yang akan kita tempelkan Spoiler Image dan Text
Paste/ tempel url img diatas tepat dibawah div style="display: none;" dan di atas text
Klik Publish

NB: Contoh image diatas adalah PNG, sehingga warna background tetap tampak.
Jangan lupa simpan txt tersebut, lalu buka halaman blog Anda selanjutnya paste seperti yang ada pada contoh di atas. Semoga bermanfaat !