Cara Membuat Halaman Codes Parser Tool

Cara Membuat Halaman Codes Parser Tool / Parse Koding Postingan

Codes Parser Tool atau Parse Koding Postingan adalah sebuah alat yang dapat anda gunakan untuk menyisipkan sebuah kode tanpa harus bersusah susah menuliskan sedikit tambahan kode agar dapat memunculkan syntax highlighter.

Biasanya untuk memunculkan kode di dalam postingan menggunakan syntax highlighter, anda harus menggunakan kode seperti ini <pre><code>KODE</code></pre> yang tentunya akan mempersulit anda dalam memasukkan sebuah kode.

Sebab anda harus beralih ke mode html terlebih dahulu dan memasukkan kode diatas. Lalu beralih ke tampilan menulis dan memasukkan kodenya kedalam syntax highlighter.

Namun tenang saja disini saya akan membagikan cara membuat tool Parse Koding Post yang akan mempermudah dan mempercepat anda dalam memasukkan sebuah kode ke dalam postingan.

Untuk hasil dari tool yang dibuat nanti kurang lebih akan jadi seperti dibawah ini.

Bagaimana cukup bagus bukan? Jika anda tertarik mari kita masuk ke tutorial nya.

Sebelum masuk ke tutorial silahkan baca artikel Cara cloning template blog, jika sudah mari kita masuk ke tutorialnya, gasss.

Cara membuat Codes Parser Tool

Pertama-tama silahkan kalian masuk ke dashboard blogger terlebih dahulu.

Jika sudah, silahkan buat halaman baru dengan judul Codes Parser Tool atau Parse Koding Postingan.

Selanjutnya beralih ke mode HTML. dan masukkan kode dibawah ini.

<style>

body {

  background:transparent;

  margin:0;

  padding:0;

  color:#212121;font-family:Roboto,sans-serif;

}

.btn,.btn:active{background-image:none}

.btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px;cursor:pointer}

.btn:active:focus,.btn:focus{outline:0}

.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}

.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}

.btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}

.btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}

.btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}

.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}

.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}

.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}

.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}

.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}

.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}

.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}

#parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:300px;width:100%;padding:10px;margin:0 0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;white-space:pre-wrap;}

#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #e8554e;outline:0}

.btn-sm{font-size:12px;line-height:1.5;border-radius:3px;padding:5px 10px}

.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}

.collapse{display:none}

#parser2{position:relative}

.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}

.alert{padding:15px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px}

button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1;z-index:2}

.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}

button.close:focus{outline:0}

.close:hover{opacity:1!important}

#btnInfo h4{margin:0}

#button-link,#btn_clear{display:none}

.btn-reset{padding:0;border:0;background:0 0;position:absolute;top:10px;right:15px;color:#ddd;font-size:34px;font-weight:lighter;cursor:pointer;line-height:1;display:none;z-index:1}

.btn-reset:hover{color:#555}

.btn-reset:focus{outline:0}

.clear{clear:both;display:block;margin-bottom:2px;}

</style>

<div id="parser2">

<textarea id="somewhere" placeholder='Tulis/paste kode di sini lalu klik tombol Parse Codes' onfocusin="focusFunction()"></textarea>

<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>

        <button class='close close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button>

        <h4>Codes copied to clipboard!</h4>

      </div>

<button class='btn-reset' id='btn-reset' onclick='cdClear2();'>&times;</button>

      <br/>

<button onclick="convert();textareaReplaceLineBreaks('#somewhere');" class='btn btn-primary btn-sm btn-parse' type="button">Parse Codes</button>

<div class="clear"></div>

<button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#somewhere' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Bersihkan</button>

</div>

<script type="text/javascript">

function convert() {

    var ele1 = document.getElementById("somewhere");

    var replaced;

    replaced = ele1.value;

    replaced = replaced.replace(/&/ig, "&amp;");

    replaced = replaced.replace(/</ig, "&lt;");

    replaced = replaced.replace(/>/ig, "&gt;");

    replaced = replaced.replace(/&#177;/ig, "&plusmn;");

    replaced = replaced.replace(/&#169;/ig, "&copy;");

    replaced = replaced.replace(/&#174;/ig, "&reg;");

    replaced = replaced.replace(/ya'll/ig, "ya'll");

    replaced = replaced.replace(/^/, "<pre><code>");

    replaced = replaced.replace(/$/, "</code></pre>");

    replaced = replaced.replace(/  /g, "&nbsp; ");

    replaced = replaced.replace(/(\r\n|\n)/g, "<br />\r\n")

    ele1.value = replaced;

	document.getElementById("button-link")

        .style.display = "inline-block";

    document.getElementById("btn_clear")

        .style.display = "inline-block";

		document.getElementById("btn-reset")

        .style.display = "none";

}

function cdClear() {

  var wtarea = document.getElementById('somewhere');

  wtarea.value = '';

  document.getElementById("btnInfo")

        .style.display = "none",document.getElementById("button-link")

        .style.display = "none",document.getElementById("btn_clear")

        .style.display = "none"

}

function cdClear2() {

  var wtarea = document.getElementById('somewhere');

  wtarea.value = '';

  document.getElementById("btn-reset")

        .style.display = "none";

}

function focusFunction() {

    document.getElementById("btn-reset").style.display = "block";

}

</script>

<script src='https://cdn.statically.io/gh/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js'></script>

<script>

//<![CDATA[

var clipboard = new Clipboard(".button-link");

clipboard.on("success", function (o) {

    console.log(o), document.getElementById("btnInfo")

        .style.display = "block", document.getElementById("button-link")

        .style.display = "none", document.getElementById("btn-reset")

        .style.display = "none", document.getElementById("somewhere")

        .value = ""

}), clipboard.on("error", function (o) {

    console.log(o)

});

//]]>

</script>

Terakhir klik simpan.

Dengan melakukan langkah diatas anda sudah berhasil membuat halaman codes parser tool. Untuk mempermudah membuka halamannya. Anda bisa meletakkannya di bagian navigasi blog kalian. Selamat mencoba.

Cari Blog Ini

HALUSINASI