Membuat Widget HTML Editor di Blog dengan Mudah

Dalam membangun sebuah blog, terkadang kita memerlukan yang namanya HTML Editor, entah itu untuk melakukan demo artikel atau kita gunakan untuk menguji coba script yang kita buat.

Sebenarnya apa sih HTML Editor itu? HTML editor adalah sebuah form yang digunakan untuk melihat hasil atau output dari sebuah kode HTML. Sebenarnya sudah banyak website yang menyediakan HTML editor secara online. Tapi jika kita bisa membuat sendiri kenapa harus membuka web orang lain?

Dengan membuat HTML editor di blog sendiri, pasti akan berpotensi menambah visitor blog. Sebab banyak blogger yang memerlukan fitur HTML editor, sehingga tools ini banyak yang mencari. Lalu bagaimana sih cara membuat HTML editor diblog dengan mudah?

Cara membuat HTML editor diblog dengan mudah

1. Login ke Blogger;
2. Setelah berhasil login ke dashboard blogger, buat halaman baru dengan cara klik Halaman -> Halaman Baru;
3. Paste kode berikut pada halaman postingan dengan posisi Tampilan HTML;
   
   

   <div style="text-align: center;">
   <b><a href="http://ifoell.blogspot.com/" target="_blank"><span style="font-size: large;">HTML Editor</span></a></b></div>
   <form method="post" name="form1">
   <textarea name="code" onclick="focus(this.code)" style="border: solid 1px #cccccc; box-shadow: 5px 5px 5px #CCCCCC; color: black; font-family: Courier New, Monospace, Courier; font-size: 14px; font-weight: normal; height: 200px; margin: 0px; padding: 5px; scroll: auto; width: 100%;"></textarea></form>
   <div style="text-align: center;">
   <button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Preview</button><button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Clear </button><span style="color: white;">
   </span></div>
   <div style="text-align: center;">
   <span style="color: white;">
   </span></div>
   <span style="color: white;"><iframe frameborder="0" name="preview" src="about:blank" style="background: #ffffff; border: solid 1px #cccccc; box-shadow: 5px 5px 5px #CCCCCC; height: 70px; padding: 5px; width: 100%;"></iframe></span>
   



4. Klik tombol Publikasikan
5. Selesai

Widget HTML Editor di blog Anda siap untuk digunakan. Tampilannya seperti berikut :

HTML Editor

Dengan membuat HTML Editor di blog, Anda dapat dengan mudah untuk melakukan edit HTML tanpa memerlukan aplikasi tambahan. Dengan begitu proses edit HTML Anda menjadi lebih cepat dari biasanya. Selain itu, Widget yang dipasang di blog juga sangat ringan untuk digunakan. Semoga Bermanfaat.