Cara Membuat Spoiler di Blog

Jumat, 01 April 2011

Spoiler - Apakah spoiler itu? Setahu saya spoiler digunakan di kaskus untuk menyembunyikan gambar atau tulisan dengan tombol show untuk membuka dan hide untuk menyembunyikan. Seperti ini contohnya
Ini adalah spoiler
ini adalah spoiler, klik show untuk membuka dan klik hide untuk menutup
Terkadang saya membutuhkan spoiler ini jika ada postingan yang memakai banyak gambar seperti pada postingan di label Koleksi dan di laman Ramalan Jodoh. Untuk membuat spoiler caranya cukup mudah cukup memasukkan kode ini di HTML pada postingan.
<div><div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> isi spoiler</div></div></div></div>
*Ganti Judul sesuai kkeinginan dan isi spoiler dengan gambar atau tulisan.

Oh iya sekalian deh kalo kode untuk membuat blok hitam seperti diatas adalah ini:
<div style="background-color: black; border-bottom: #ccc 1px solid; border-left: #ccc 1px solid; border-right: #ccc 1px solid; border-top: #ccc 1px solid; height: auto; margin: 10px 0px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: left; width: auto;"> isi tulisan atau gambar </div>
*Ganti isi tulisan atau gambar sesuai keinginan.

Untuk menampilkan kode HTML dalam postingan seperti di postingan saya kali ini, pertama kita perlu berkunjung disini
copy paste kode HTML sobat Selanjutnya untuk mengubah kode HTML sobat ke wujud kode postingan, maka kliklah Encode. dan tombol Decode berfungsi untuk mengembalikan kode postingan ke kode HTML. Kopi kode hasil Encode ke halaman postingan dengan memasukkan kode HTML hasil Encode di postingan, namun pilihlah tulisan EDIT HTML dilayar postingan bukan di Compose.
Sebelum publish/terbitkan entri ada baiknya terlebih dulu mengklik tulisan Pratinjau yang telah disediakan oleh pihak blogger di halaman posting untuk melihat hasil postingan. Nah karena kode yang digunakan lumayan panjang jadi saya harus membuka blog yang memposting tentang cara membuat spoiler dulu untuk mendapatkan kode spoiler. Saya pikir "capek juga ya membuka blog orang cuma untuk mengcopy kode spoiler lebih baik saya buat aja postingan sendiri tentang cara membuat spoiler". Jadi sebetulnya semua trik blogspot yang semua saya posting semata-mata bertujuan untuk pribadi.

MySpace


Baca juga artikel dibawah ini

Next Prev