Membuat HTML Editor Online di Halaman Blogger
Pada postingan sebelumnya, saya menjelasakan Bagaimana Membuat HTML Editor Online. Tutorial tersebut untuk pengguna Hosting atau GithubPage. bagi Pengguna Blogger caranya akan saya jelaskan, sesuai pertanyanyaan Nick Cobain.
Membuat HTML Editor di Blogger
Persiapan sebelum edit, biasakan Backup Template terlebih dahulu. Kita lanjutkan tahapan-tahapannya. Kalau penasaran hasilnya, bisa lihat Demo.
Demo HTML Editor Online BloggerBuat Halaman Baru
Silahkan buat halaman baru dengen judul Editor, atau HTML Editor, terserah. Lalu Publikasikan (Halaman tidah usah diisi apa pun, kosongkan saja, kecuali judul). Misalkan URL yang didapat https://namablog.blogspot.com/p/html-editor.html.
Hash Halaman yang ditandai tadi harus diingat, untuk membuat tag kondisonal nantinya.
Simpan Link CSS CodeMirror
Seperti biasa Edit HTML, tambahkan kode ini sebelum </head>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.css'/>Sampai sini, Template Boleh disimpan (Save) terlebih dahulu.
Menambah Tag Kondisional
Ini adalah pembuka tag kondisional pengingkaran, agar tidak meload halaman lain. Simpan kode persis di bawah <body>.
<b:if cond='data:view.url != data:blog.homepageUrl path "/p/html-editor.html"'>Ganti /p/html-editor.html dengan Path Halaman yang sebelumnya telah dibuat.
Menambahkan Kode HTML dan JavaScript
Simpan kode di bawah ini, persis sebelum </body>
</b:if>
<b:if cond='data:view.url == data:blog.homepageUrl path "/p/html-editor.html"'>
<style>
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* --- HEADER --- */
.header {height:80px !important;top:0;line-height:80px;background: linear-gradient(90deg, #851B41 0%, #6937BE 100%);color: #fff;text-align:center;}
.header h1 {font-size:38px;font-weight:normal;margin:0 !important}
.nav {height:40px;background:#374044;padding:6px}
section {
position: relative;
padding:0;
}
.container {
position: relative;
margin: auto;
padding: 0 20px;
width: 100%;
max-width: 99%;
display:flex;
margin-top:15px;
}
/* ----------
CODE BLOCK
---------- */
.code-container {
position: relative;
overflow: hidden;
border-radius: 3px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
width:50%;
}
.CodeMirror {height:500px !important;font-size:14px}
.run {
background-color: #1f92c8;
color: #fff;
padding: 4px 10px;
text-decoration: none;
border-radius: 5px;
margin-left:20px;
display:block;
cursor:pointer;
display:block;
}
.run:hover {background:#1a82b3;
}
button{border:none;outline:none}
#code_result {
margin-left:15px;
border-radius: 3px;
background:#fff;
border:1px solid #ddd;
box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
}
iframe {border:none;outline:none}
</style>
<div class='header'>
<h1>Simple Code Editor</h1>
</div>
<div class='nav'>
<button class='run' onclick='run()'>Run code! ❯</button>
</div>
<section>
<div class='container'>
<div class='code-container'>
<textarea id='code'>
<!DOCTYPE html>
<html>
<head>
<style>
.container {display:flex;padding:15px;border:1px solid #bbb}
.merah, .hijau{width:50%;color:white;text-align:center;padding:15px}
.merah{background:red}
.hijau{background:green}
</style>
</head>
<body>
<div class="container">
<div class="merah">
<p>Ini Merah</p>
</div>
<div class="hijau">
<p>Ini Hijau</p>
</div>
</div>
</body>
</html></textarea>
</div>
<iframe height='500px' id='code_result' width='49%'>
</iframe>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/xml/xml.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/css/css.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/javascript/javascript.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/htmlmixed/htmlmixed.js'/>
<script id='rendered-js'>
//<![CDATA[
var doc = document.getElementById('code_result').contentWindow.document;
var html_value;
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
styleActiveLine: true,
lineNumbers: true,
matchBrackets: true,
autoCloseBrackets: true,
autoCloseTags: true,
mode: "htmlmixed",
});
function run() {
html_value = editor.getValue();
doc.open();
doc.write(html_value);
doc.close();
}
///]]>
</script>
</b:if> Perhatikan baris ke-2. Edit kembali path Halaman Statis. SImpan dan Lihat Hasinya.
makasih kang udah dibikinin tinggal praktek
siap sama sama sob