Cara Menampilkan Kode HTML pada Spoiler dalam Posting

Posting kali ini merupakan kelanjutan dari posting yang berjudul Cara Membuat Spoiler di Blogger. Bila kita meletakkan konten yang berupa tulisan atau teks biasa di kode HTML pembentuk spoiler, maka kita tidak menemukan hambatan yang berarti.

Contoh:

Kita akan memasukkan teks "Tuh kan di sini nggak ada apa-apa." ke spoiler.

<div style="margin: 5px 20px 20px;">

<div class="smallfont" style="margin-bottom: 2px;">

<b>Spoiler</b>: <input 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 = 'Tutup aja deh'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Jangan diklik'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 100px;" type="button" value="Jangan diklik" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">

"Tuh kan di sini nggak ada apa-apa."

</div>

</div>

</div>

Maka hasilnya seperti ini.

Spoiler:

"Tuh kan di sini nggak ada apa-apa."

Namun, jika kita ingin memasukkan kode HTML, misalnya kode HTML untuk membuat text area, kita tidak dapat meletakkan kode HTML tersebut langsung seperti cara dia di atas. Kita memerlukan beberapa langkah untuk dapat menampilkan kode HTML pada spoiler dalam posting. Berikut ini langkah-langkahnya.

1. Siapkan kode HTML untuk membuat text area di posisi Compose.

<div align="center"><textarea cols="25" name="code" rows="5">Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area</textarea></div>

2. Kemudian lihat kode HTML tersebut di posisi Edit HTML. Di situ terlihat kode HTML mengalami sedikit perubahan bentuk penulisan.

&lt;div align="center"&gt;&lt;textarea cols="25" name="code" rows="5"&gt;Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area&lt;/textarea&gt;&lt;/div&gt;

3. Selanjutnya, copy dan paste kode HTML tersebut pada tempat yang disediakan di kode HTML spoiler.

<div style="margin: 5px 20px 20px;">

<div class="smallfont" style="margin-bottom: 2px;">

<b>Kode HTML membuat text area</b>: <input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">

&lt;div align="center"&gt;&lt;textarea cols="25" name="code" rows="5"&gt;Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area&lt;/textarea&gt;&lt;/div&gt;

</div>

</div>

</div>

4. Maka hasilnya seperti di bawah ini.

Kode HTML membuat text area:

<div align="center"><textarea cols="25" name="code" rows="5">Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area</textarea></div>

Jadi, untuk dapat menampilkan kode HTML pada spoiler diperlukan langkah-langkah seperti di atas. Karena kalau langsung meletakkan kode HTML tersebut pada kode HTML spoiler, maka jadinya seperti di bawah ini.

Kode HTML membuat text area:

Silakan tulis teks-teks atau kode-kode HTML Anda di sini. Nanti teks Anda akan muncul di text area

Read More

Cara Membuat Spoiler di Blogger

Jika Anda mengunjungi situs-situs forum seperti Kaskus, tentu Anda pernah menjumpai yang namanya Spoiler ini. Spoiler merupakan suatu teknik untuk menyembunyikan teks yang panjang, gambar, atau video. Spoiler dapat pula kita terapkan dalam membuat suatu artikel di Blogger. Dengan membuat spoiler ini kita dapat menghemat tempat atau ruang di halaman posting.

Untuk membuat spoiler di posting, Anda cukup menyalin kode script di bawah ini lalu menempelkannya di menu Edit HTML.

<div style="margin: 5px 20px 20px;">

<div class="smallfont" style="margin-bottom: 2px;">

<b>Spoiler</b>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">

Letakkan konten Anda di sini.

</div>

</div>

</div>

Keterangan:

• Untuk tulisan Spoiler merupakan judul spoiler, Anda dapat menggantinya sesuai keinginan.
• Tulisan Open dan Close dapat diubah sesuai keinginan Anda.
• width: 55px; menunjukkan lebar spoiler.
• font-size: 11px; menunjukkan ukuran huruf dalam spoiler.
• Ganti tulisan Letakkan konten Anda di sini dengan konten yang ingin Anda masukkan ke spoiler.

Bila script di atas diletakkan di menu Edit HTML maka hasilnya akan seperti ini.

Spoiler:

Letakkan konten Anda di sini.

Read More