Membuat Spoiler Text

Membuat Spoiler Text dan Image maksudnya adalah ketika pengunjung klik Read more, maka akan menampilkan text dan/ atau gambar 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 Text dibawah ini :
Kita tidak dapat mengubah arah angin tetapi kita dapat mengatur layar perahu ; Jangan pernah berputus asa akan takdir, .percaya pada diri anda, hargai diri anda bukan dengan keangkuhan melainkan dengan kerendahan hati,
dan   rasa percaya diri yang realistik ;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.
Contoh spoiler text:
Tantangan adalah bagian dari kehidupan hadapi dengan hati riang, mengetahui bahwa anda akan menang dalam sebagian kesempatan, dan kalah dalam sejumlah kesempatan lainya , akan menjadikan anda seseorang yang lebih baik karena telah berani mencoba apapun hasilnya.
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.

Membuat Sopiler Text :
Silakan copy dulu text 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

Jangan lupa simpan txt tersebut, lalu buka halaman blog Anda selanjutnya paste seperti yang ada pada contoh di atas. Semoga bermanfaat !