Cara Menampilkan Kode HTML pada Postingan

Seperti yang sudah kita ketahui bahwa kode-kode HTML selalu tersembunyi dibalik sebuah halaman web, meski begitu karena fungsi dari tag-tag HTML itulah sebuah browser bisa membuka dan menampilkan halaman web dengan baik.

Biasanya tujuan Kode HTML ditampilkan dalam sebuah postingan untuk memberi contoh dari sebuah penjelasan, menshare sebuah link, script iklan atau widget untuk dicopy paste dan maksud-maksud lainnya. Untuk menampilkan kode html dalam postingan kita harus “melumpuhkan” atau menon-aktikan kode tersebut sehingga menjadi tidak berfungsi dan tampil di halaman web sebagai teks karakter biasa.

Cara yang umum digunakan untuk menampilkan kode HTML ialah dengan mengganti simbol-simbol dari HTML tersebut menjadi sebuah wujud karakter HTML, sehingga browser pun hanya akan mengenali tag-tag tersebut sebagai sebuah simbol karakter, bukan sebagai sebuah TAG HTML. Misalnya untuk menampilkan kurung sudut buka ( < ), kurung sudut tutup ( > ) dan kode-kode lainnya diubah penulisannya menjadi seperti ini :

< = &lt;
> = &gt;
/ = & #47;
] = & #93;
[ = & #91;
" = & #34;
' = & #39;
& = &amp;

Contoh: &lt;html&gt;konten&lt;/html&gt; menjadi

<html>konten</html>

Proses ini disebut encoding atau parsing Cara yang sama berlaku juga jika kita akan memasukan kode HTML ke dalam Teks area. Untuk memudahkan copy paste.

Cara yang baik dalam menampilkannya pada post adalah dengan memisahkannya dengan spasi, bahasa kerennya monospaced types tujuannya agar pembaca tahu bahwa yang ditampilkan adalah sebuah kode. Cara memisahkannya pun tak perlu satu persatu karena ada tag HTML yang berfungsi untuk itu yakni <code>KODE</code> menjadi KODE.

Untuk membuat kode terlihat seperti berada dalam kotak cukup tambahkan tag <pre>KODE DALAM KOTAK</pre> Contoh :

<b>textbold</b>

Kalau merasa tidak hapal dengan kode2 pengganti tersebut atau terlalu ribet jangan khawatir karena sudah banyak tersedia online encoder decoder HTML file,sebuah free tool yang bisa digunakan untuk mengkonversi wujud keberadaan HTML.silahkan masuk ke salah satu alamat berikut :

http://htmlentities.net
http://encode.ykub.xtgem.com

Pertama-tama masukan file HTMLnya lalu pilih encode untuk membuat proses pemecahan kode/symbol html menjadi teks biasa, Atau decode untuk proses pembalikan dari kode teks html biasa menjadi kode html kembali (vice versa). Copy hasilnya dan pastekan ke dalam postingan atau teks area.

Be the first to like.

Cara Menyembunyikan Teks pada Postingan

Spolier berfungsi untuk menyembunyikan teks pada website/blog. Maksudnya ketika tombol di klik, maka teks akan tampil dan ketika di klik sekali lagi, maka akan tersembunyi. Tujuannya adalah untuk menghemat space atau ruang dalam suatu postingan atau sidebar. Sebetulnya tidak hanya teks biasa yang bisa Anda sembunyikan tetapi bisa juga gambar, video, link dan lain-lain.

Keuntungan lain menggunakan Spoiler adalah bisa mengurangi waktu loading, maksudnya adalah, jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Spoiler juga bisa digunakan untuk menyembunyikan video agar loadingnya tidak berat. Cara membuatnya adalah dengan menyisipkan kode HTML dibawah ini:

<div id=”spoiler”>
<div><input style=”font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;” name=”button” type=”button” value=”KLIK DISINI” /></div>
<div id=”show” style=”border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;”>
<div style=”background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; color: black; margin: 0px; padding: 7px;”>
<div style=”text-align: justify;”>Disini Teks yang ingin Anda sembunyikan</div>
</div>
<div id=”hide”></div>
</div>

Catatan: Tutorial ini berlaku untuk blog wordpress hosting berbayar.

2 people like this post.