Di artikel ini akan dibahas 2 cara menampilkan atau memunculkan kode HTML di posting blog, yaitu:
- Menampilkan kode HTML di posting blog dengan kode textarea
- Menampilkan kode HTML di posting blog dengan cara di parse dan ditambah kode blockquote biar tambah menarik dan keren.
# 1. Menampilkan kode HTML di posting artikel dengan menggunakan kode textarea.
Menampilkan kode HTML menggunakan kode textarea memang terlihat sederhana, namun dibalik tampilan yang sederhana ada manfaat yang besar bagi pengguna, terutama dalam meng-copy kode tanpa gagal. Berbeda dengan meng-copy kode secara langsung di dinding blog terkadang ada gagalnya, apalagi kalau meng-copy kodenya pakai Hp jadul maka sering terjadi spasi error (spasi acak), akibatnya kode HTML jadi tidak dapat digunakan sebagaimana semestinya.
Oleh karena itu, bagi seorang Blogger untuk mengetahui cara menampilkan kode HTML di dalam posting blog adalah hal yang perlu untuk menambah pengetahuan dalam menggeluti dunia blog, entah itu blog puisi, blog cerpen atau blog apapun itu.
Dan siapa tau dikemudian hari Anda memerlukannya atau mau banting setir jadi blog tutorial kode.
Untuk itulah Cara Sakray Blog berbagi buat pemula tentang cara menampilkan kode HTML di dalam posting artikel dengan kode textarea.
Untuk memunculkan kode HTML di dalam posting blog dengan kode textarea caranya cukup mudah, Anda cukup mengetahui kode textarea saja langsung bisa menampilkan kode HTML, contoh:
Buatlah kode textarea seperti ini:
</textarea>
Kemudian simpan kode HTML ditengah atau diantara kode textarea pembuka dan penutup, lihat cara penerapannya dibawah:
1. <html></html>
2. <html></html>
3. <html></html>
</textarea>
Hasilnya akan seperti ini:
Contoh tampilan kode diatas terlihat tidak utuh, kecuali kalau digeser keatas dan kebawah atau langsung di copy maka akan terlihat utuh semua. Untuk menampilkan kode HTML agar terlihat utuh kita tinggal menambahkan beberapa elemen kode textarea, yaitu dengan:
- background
- width
- height
1. <html></html>
2. <html></html>
3. <html></html>
</textarea>
Hasilnya, kode HTML akan terlihat secara utuh dalam tampilan. Lihat dibawah:
Background: Untuk mengatur warna latar kotak teks.
Width: Untuk mengatur lebar kotak teks.
Height: Untuk mengatur tinggi kotak teks.
Anda pun dapat mengkreasikan tampilan kode HTML di posting artikel dengan kode textarea seperti dibawah ini:
Demikianlah cara menampilkan kode HTML keren di posting blog dengan menggunakan kode textarea.
Cara selanjutnya mari kita bahas ke cara yang kedua.
# 1. Menampilkan kode HTML di posting artikel dengan parse dan blockquote keren
Silahkan Anda lihat dulu tampilan kode HTML dibawah ini:
Tampilan kode diatas telah melalui parse terlebih dahalu agar dapat muncul di dalam postingan artikel, sebab kalau kode HTML tidak di parse terlebih dulu maka kode HTML tidak akan muncul (blank).
Anda dapat mem-parse kode HTML secara gratis di web generator. Jika berminat silahkan masuk ke htmlparse
Setelah halaman htmlparse terbuka masukkan kode HTML yang akan di parse ke dalam kotak teks "Add Codes Here and Click Encode Parse it" kemudian klik tombol ENCODE dan selanjutnya copy kode yang telah di parse dan masukkan kedalam posting artikel, maka kode HTML akan muncul dipostingan Anda.
Bagaimana cara agar tampilan kode Html jadi terlihat keren ?
Dibawah ada beberapa contoh tampilan kode Html keren dan Anda dapat meng-copy kodenya langsung dari masing-masing tampilan.
Copy tampilan kode HTML untuk posting artikel dengan parse dan blockquote keren
<blockquote style="background-color:#fff9ee;border-left:3px solid #666666;margin:0.5em;padding:0.5em;"> Simpan kode yang telah di parse disini</blockquote>
<blockquote style="background-color:#fff9ee;border-left:5px solid #006400;margin:0.5em;padding:0.5em;"> Simpan kode yang telah di parse disini</blockquote>
<blockquote style="background-color:#fff9ee;border-left:7px solid #ff0000;margin:0.5em;padding:0.5em;"> Simpan kode yang telah di parse disini,contoh;
<font color="#ff0000"> Untuk kode warna merah</font>
<font color="#006400">Untuk kode warna hijau</font>
<font color="#0000ff">Untuk kode warna biru</font> </blockquote>
Untuk membuat tampilan kode HTML yang lebih variatif dan lebih keren lagi, Anda dapat mengkreasikan sendiri menurut selera Anda. Dan kode HTML yang diatas hanyalah contoh saja, tapi walaupun sekedar contoh Anda bebas untuk mencopy dan menggunakannya dimanapun dan kapan pun, baik digunakan untuk posting artikel atau yang lainnya. silahkan copy kode Html diatas dan kreasikan menurut selera Anda.
Oh ya, kalau untuk mencopy seluruh isi tulisan diatas mohon sertakan sumber dari blog ini.
Demikian cara menampilkan kode HTML di posting blog dapat dilakukan. Semoga ada manfaatnya untuk anda.
Jika artikel ini cukup bermanfaat silahkan bagikan artikel ini ke:
Hi there it's me, I am also visiting this site on a regular basis, this site is actually nice and the visitors are
ReplyDeletetruly sharing nice thoughts.
I am regular visitor, how are you everybody? This post
ReplyDeleteposted at this site is really good.
But wanna tell that this is very beneficial, Thanks
ReplyDeletefor taking your time to write this.
You have brought up a very good points, appreciate it for the post.
ReplyDeleteI'm truly enjoying the design and layout of your site.
ReplyDeleteIt's a very easy on the eyes which makes it much more enjoyablee for me to come here and visit more
often. Did you hire out a developer to create your theme?
Outstanding work!