Cara Membuat Live Code Editor di Blogger

Daftar Isi

Halo sobat, saya akan bagikan cara membuat tool live kode editor di blogger atau blogspot. Membuat tools ini cukup mudah di halaman blog mu sobat. Sebelum ke inti apa itu live code editor?

Live Code Editor adalah sebuah tool yang digunakan untuk membuat dan mengedit kode secara langsung. Fitur ini sangat bermanfaat bagi para blogger yang ingin membagikan tutorial, tips, atau artikel tentang pemrograman, desain web, atau topik sejenisnya.

Dengan menggunakan Live Code Editor, kamu dapat menampilkan potongan kode mu secara langsung secara real-time. Kamu tidak perlu mencari generator tool yang disediakan berbagai website. Kamu juga dapat membuatnya sendiri, berikut adalah contoh demonya.

Menarik bukan? membuat tools live code editor cukup mudah, kamu tinggal menyalin script yang saya bagikan di bawah dan meletakkan di halaman statis blogger.

Membuat Live Code Editor

Silahkan masuk terlebih dahulu ke Blogger, selanjutnya pilih menu Halaman dan buat halaman baru. Silahkan paste kode script dibawah ini di mode html.

<style>
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}}
body{color:#000000;margin:0;font-size:100%}
a{color:#000;text-decoration:none}
.container{background-color:transparent;width:100%;overflow:auto;position:relative;display:block;bottom:0;height:auto;min-height:900px;min-width:100%}
.textareacontainer,.iframecontainer{float:left;height:100%;width:50%}
.textarea,.iframe{height:100%;width:100%;padding:4px}
.textarea{padding:4px}
.iframe{padding:4px}
.headerText{width:auto;float:left;font-family:verdana;font-size:1em;line-height:2}
.seeResult{float:right;font-size:14px;background-color:#3367D6;color:#ffffff;border-radius:4px;padding:3px 15px;line-height:1.45;width:auto;cursor:pointer;border:none;margin:0px 0px 4px 4px;}
.seeResult:hover{background-color:#444}
.seeResult:active{background-color:#444}
.textareawrapper{width:100%;height:350px;background-color:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);border-radius:8px;padding:8px;overflow:hidden}
.iframewrapper{width:100%;height:350px;background-color:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);border-radius:8px;padding:8px;overflow:hidden!important}
#textareaCode{background-color:#ffffff;font-family:consolas,"courier new",monospace;height:100%;width:100%;padding:8px;resize:none;border:none}
#iframeResult,#iframeSource{background-color:#ffffff;height:100%;width:100%}
@media screen and (max-width:768px){.container{top:100px}}
@media screen and (max-width:728px){#tryitLeaderboard{margin-top:0}.container{top:60px}}
@media screen and (max-width:467px){.container{top:50px}}
@media only screen and (max-device-width:768px){#textareaCode{padding:5px}.iframewrapper{overflow:auto}.container{min-width:320px}.textarea,.iframe{height:97%}@media screen and (orientation:portrait){.textareacontainer,.iframecontainer{height:50%;float:none;width:98%}.textarea,.iframe{height:97%;padding:15px}}}
</style>

<script type="text/javascript">
function eraseText() {
     document.getElementById("textareaCode").value = "";}
function submitTryit() {
  var text = document.getElementById("textareaCode").value;
  var ifr = document.createElement("iframe");
  ifr.setAttribute("frameborder", "0");
  ifr.setAttribute("id", "iframeResult");  
  document.getElementById("iframewrapper").innerHTML = "";
  document.getElementById("iframewrapper").appendChild(ifr);
  var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
  ifrw.document.open();
  ifrw.document.write(text);  
  ifrw.document.close();
}
</script>

<!-- Live code editor --> 

<div class="container">
  <div class="textareacontainer">
    <div class="textarea">
      <div style="overflow:auto;">
        <div class="headerText">Tulis Kode :</div>
        <button class="seeResult" type="button" onclick="submitTryit()">Submit &raquo;</button>
      </div>
      <div class="textareawrapper">
        <textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" spellcheck="false">
        	
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

Test Bro...

</body>
</html>

</textarea>
          <form autocomplete="off" style="margin:0px;display:none;">
            <input type="hidden" name="code" id="code" />
            <input type="hidden" id="bt" name="bt" />
          </form>
       </div>
    </div>
  </div>
  <div class="iframecontainer">
    <div class="iframe">
      <div style="overflow:auto;">
      <div class="headerText">Hasilnya :</div>
      <button class="seeResult" type="button" onclick="eraseText();"> Hapus</button>
      </div>
      <div id="iframewrapper" class="iframewrapper">
      </div>
    </div>
    

Setelah selesai, silahkan masukkan kode html, ccs ataupun javascript di textarea tersebut untuk iframe pengujiannya.

Bagi yang kurang pas ukuran, warna dan button-nya silahkan edit sesuka hati. Kalau menurut saya ini sudah simpel dan enak dilihat.

Demikian cara membuat tool live code editor di blogger. Silahkan dicoba ya sobat, semoga dapat membantu aktivitas blogging mu. Sekian, terima kasih.