Membuat Tools HTML Editor di Blog

Tools HTML Editor ini sangat perlu sekali dalam pembuatan blog, dimana fungsinya untuk menguji kode CSS dan kode HTML sebelum kita  pasang di blog kita, adapun cara membuat tool ini yaitu sebagai berikut :

1. Login ke akun blogger Anda.
2. Klik Template  Edit HTML.
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahan kode CSS berikut ini tepat di atas kode ]]></b:skin> atau </style>

.abc {
border-radius: 3px;
border: 2px solid #1abc9c;
color: #111;
font-family: Consolas, Andale Mono, Monaco, Courier, Courier New, Verdana, sans-serif;
font-size: 0.9em;
height: 300px;
line-height: 1.3em;
margin: 0px;
padding: 0px;
width: 100%;
}
.def {
background: #fff;
border-radius: 2px;
border: 2px solid #1abc9c;
height: 720px;
width: 100%;
overflow: auto;
}

5. Jika sudah Save template.

6. Selanjutnya buat New Page dengan judul HTML Editor dan letakkan kode HTML berikut ini di post-body, ingat ..! yang perlu Anda perhatikan dalam meletakkan kodenya dalam posisi HTML bukan Compose  Publish.

<form method="post" name="form1"><textarea class="abc" name="code" onclick="focus(this.code)">&lt;style type="text/css"&gt; Kode CSS disini &lt;/style&gt;&lt;br /&gt;
Kode HTML disini</textarea></form>
<ul class="button">
<li><button class="pejet" onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Preview</button></li>
<li><button class="pejet" onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Clear</button></li>
</ul>
<iframe name="preview" class="def" src="" allowfullscreen="allowfullscreen"></iframe>

7. Selesai.

Selamat mencoba dan semoga berhasil,..

• Demo

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250