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