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)"><style type="text/css"> Kode CSS disini </style><br />
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.