How To Add Codes Parser Tools in Blogger Blog

How To Add Codes Parser Tools in Blogger Blog

Welcome. here I will share a little tutorial to create a very useful tool, and it may still not be on the internet. The name is Codes Parser Tool, a tool that makes it easier to insert a code in a post.

If we previously inserted a code we have to switch to html mode first and install <pre><code>Code to be created </code></pre>, then switch to post again and paste the code into "Code to be created". It will certainly be quite complicated, I have felt it myself.

Therefore here I will facilitate this way by creating this Code Parse Page. by using this tool we don't need to be fussy, because we just put the code into the page we created and then hit parse codes. and put it in html mode.

For easier you can try directly below:

How very useful isn't it?, okay, let's just get started.

Tutorial How To Add Codes Parser Tools in Blogger Blog

1.Login to your own blogger account

2. Create a new page with the title Codes Parser Tool

3. Copy the code below and place it on the page to be created earlier, remember put it in HTML mode.

<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" onfocusin="focusFunction()" placeholder=""></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">×</span></button>

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

      </div>

<button class="btn-reset" id="btn-reset" onclick="cdClear2();">×</button>

      <br />

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

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

<button class="btn button-link btn-xs btn-info" data-clipboard-action="copy" data-clipboard-target="#somewhere" id="button-link" 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>

4. Last saved the page. Now you can use it.

Have a good !!!, Don't forget to share this article to social media that you guys have yes.

TEST

www.masgio.xyz

Share this post