Cara Membuat Halaman HTML Editor di Postingan Blog
Yosa AP
---
Cara Menambahkan HTML Editor di Halaman Blog - Selamat pagi, kembali lagi bersama saya di TutorialKomputer.net. Pada kesempatan kali ini saya akan memberikan tutorial tentang bagaimana menambahkan HTML Editor pada halaman blogspot. HTML Editor merupakan tools untuk melakukan pembuatan sekaligus pengeditan kode HTML. HTML sendiri merupakan singkatan dari Hypertext Markup Language.
 |
| Tutorial Membuat Halaman HTML Editor di Blog |
HTML biasanya digunakan untuk membuat sebuah website, termasuk didalamnya adalah tampilan, menu dan halaman pada website.
Salah satu fungsi dari HTML Editor adalah untuk mempermudah pekerjaan seorang programmer. Walaupun memakai Notepad sebenarnya juga bisa, namun fungsi yang terdapat pada HTML Editor jauh lebih lengkap.
Baca juga : Cara Membuat Halaman C++ Editor di Blogspot
Langsung saja berikut tutorial pembuatannya :
1. Buka Blogger.com
2. Pilih menu Halaman.
 |
| Pilih menu Halaman |
3. Masukkan Judul halaman.
Baca juga : Cara Membuat Halaman C# Editor di Blogspot
4. Ubah tampilan dari tampilan menulis ke tampilan HTML.
 |
| Ubah Tampilan menulis menjadi Tampilan HTML |
5. Salin dan tempelkan kode dibawah ini ke halaman kosong pada Tampilan HTML.
<a></a><div><a></a><a><br /></a></div><b>Masukkan skrip HTML kedalam kolom dibawah ini</b>
<form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 5px 5px 5px; color: black; font-family: "Courier New", monospace, Courier; font-size: 14px; font-weight: normal; height: 300px; margin: 0px; padding: 5px; scroll: auto; width: 100%;"></textarea></form>
<div style="text-align: center;">
<div class="btn-group"><button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Run</button><button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Clear </button></div><span style="color: white;">
</span></div>
<br />
<div style="text-align: center;">
<span style="color: white;">
</span></div><b>Hasil Run</b>
<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; box-shadow: 5px 5px 5px #CCCCCC; height: 300px; padding: 5px; width: 100%;"></iframe></span>
<style>
.btn-group button {
background-color: #2b3c4d;
border: 1px solid white;
color: white;
padding: 10px 24px;
cursor: pointer;
float: center;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group button:hover {
background-color: #6babc3;
}
</style>
6. Pilih Opsi - Komentar pembaca yang berada dibagian sebelah kanan, centang pada tulisan Jangan izinkan, sembunyikan yang telah ada.
7. Langkah terakhir adalah pilih Publikasikan.
8. Silahkan cek pada halaman blog yang sudah dibuat.apabila tampilannya seperti gambar dibawah ini, maka HTML Editor selesai dibuat.
 |
| Hasil tampilan HTML Editor |
Sekian tutorial tentang cara membuat halaman HTML Editor di blogspot. Sampai jumpa pada tutorial selanjutnya ya, selamat mencoba
Posting Komentar
Posting Komentar