Responsive Banner design
Home » » Cara Menampilkan Kode HTML Keren di Postingan Blog

Cara Menampilkan Kode HTML Keren di Postingan Blog

http://www.tipskesahatan.xyz

Cara Menampilkan Kode HTML Keren di Postingan Blog


Cara menampilkan Kode Html Keren di Posting Artikel Blog

Disini Pemirsa akan menemukan 2 cara menampilkan kode Html di posting artikel.

Cara pertama:
Menampilkan kode Html di posting blog dengan kode textarea.
Cara kedua:
Menampilkan kode Html di posting blog dengan parse dan blockquote keren.

Cara pertama

Cara 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 tanpa gagal.
Berbeda dengan meng-copy kode secara langsung di dinding blog terkadang ada gagalnya, apalagi kalau meng-copy kodenya pakai Hp java sering terjadi spasi error (spasi acak) jadinya kode Html tak dapat digunakan semestinya.

Oleh karena itu bagi seorang Blogger 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 Pemirsa memerlukannya dan 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.

Cara memunculkan kode Html di dalam posting blog dengan kode textarea caranya cukup mudah, Pemirsa tinggal mengetahui kode textarea saja langsung bisa menampilkan kode Html, contoh:

Buatlah kode textarea seperti ini:

<textarea>
</textarea>

Kemudian simpan kode Html diantara kode textarea pembuka dan penutup, lihat dibawah caranya:

<textarea>
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 di copy maka akan utuh semua.
Untuk menampilkan kode html agar terlihat utuh kita tinggal menambahkan kode textarea dengan:
  1. background
  2. width
  3. height
Contoh cara membuatnya lihat kebawah:

<textarea style="background:#ffffff; width:300px; height:150px;">
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.

Pemirsa pun dapat mengkreasikan tampilan kode Html di posting artikel dengan kode textarea seperti dibawah ini:

Silahkan Anda copy kode Html dibawah untuk membuat tampilan seperti ini.


Demikianlah cara menampilkan kode Html keren di posting blog dengan menggunakan kode textarea .

Selanjutnya cara kedua

Cara menampilkan kode Html di posting artikel dengan parse dan blockquote keren

lihat dulu tampilan kode Html dibawah ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>


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).
Pemirsa pun dapat mem-parse kode Html secara gratis di web generator.
Jika berminat silahkan masuk ke htmlparse

Setelah halaman htmlparse terbuka masukkan kode Html Anda 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 Pemirsa dapat meng-copy kodenya langsung dari masing-masing tampilan.

Copy tampilan kode Html di 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 keren di posting artikel silahkan copy kode Html diatas dan kreasikan menurut selera Anda.