4 Script Tools Online Yang Wajib Kamu Pasang Di Blog

Menambahkan tools online pada blog pribadi sebenarnya tidak begitu penting, namun hal ini akan sedikit menarik pengunjung ketika akan memakai salah satu alat dari blog kita maka pengunjung akan terus kembali lagi untuk memakainya.

Berikut ini saya sediakan beberapa tools online yang wajib di pasang pada blog anda, selain berfungsi untuk untuk orang lain. mungkin saja anda juga akan membutuhkannya untuk dipakai sendiri.

4 Script Tools Online Bermanfaat Untuk Blog

  1. Script Tools HTML Encode
  2. Script Tools Word Counter
  3. Script Tools CSS Minifier
  4. Script Tools HTML Parse

Sebelum memasang ke 4 script tools online di bawah pada halaman blog kamu, pastikan dulu sebelumnya kamu sudah memasang Ajax jQuery pada template blog kalian, agar tools dapat berfungsi dengan baik.

Jika kalian belum memasang Ajax jQuery pada template blog, silahkan salin code di bawah ini kemudian tempelkan code tsb tepat di bawah code <head> .

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Script Tools Online HTML Encode

Tools ini berfungsi untuk melindungi code HTML agar tidak dapat dilihat dalam bentuk code aslinya, hal ini bertujuan untuk menghindari duplikat code. Yg artinya agar script yang kita buat tidak dengan mudah di recode oleh orang lain.


<div dir="ltr" style="text-align: left;" trbidi="on">
   <div id="html-parse">
      <style scoped="" type="text/css">
         .darkMode #html-parse .button-group{float:none;background:#444852;}.darkMode #html-parse textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color:white;}.darkMode #html-parse{background:#2d3158;}#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important;}#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}.post-body,.post{background-position:center!important;}.post-body p{margin:0;}#blog1,#artikel,.blog-posts{background-position:center!important;}#comments,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0;}#main-wrapper{padding:0;width:100%;border:0;}#html-parse{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;}#html-parse textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2;}textarea:focus{background-color:#fff;color:#303030;}#html-parse .box{margin:10px auto 30px;color:#fff;font-size:90%;}#html-parse .box p{margin:0 0 2px;}#html-parse button{cursor:pointer;}#html-parse .col{width:48%;margin:0 auto 30px;}#html-parse .left{float:left;margin-left:1%;}#html-parse .right{float:right;margin-right:1%;}#html-parse .button-group {float: none;background: #4d6a79;text-align: center;margin: 0 0 28px 10px;border-radius: 30px 30px;}#html-parse button,#html-parse button[disabled]:active{background:rgba(255,255,255,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s;}#html-parse button:hover,#html-parse button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);}#html-parse button[disabled],#html-parse button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);}#html-parse .opt1,#html-parse .opt2,#html-parse .opt3,#html-parse .opt4,#html-parse .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none;}#html-parse br{display:none;}.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em;}.option-input:hover{background:rgba(255,255,255,.3);}.option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s;}.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px;}.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100;}.option-input.radio{border-radius:50%;}.option-input.radio::after{border-radius:50%;}

      </style>
      <br />
      <form method="post" name="pageform" onsubmit="return doencrypt(this);">
         <span class="clear"></span><br />
         <textarea cols="30" id="areatxt" name="code" placeholder="Paste your HTML, JS, CSS, PHP, C+ code here..." rows="20"></textarea>
         <br />
         <div class="button-group">
            <div class="box"></div>
            <button class="ripplelink" id="button-on" onclick="doencrypt(pageform);">Convert HTML</button>
            <button class="ripplelink" id="button-on" type="reset">Clear Field</button> <br />
            <button class="ripplelink" id="txtarea" onclick="copyToClipboard();">Copy All</button>
         </div>
         <textarea cols="30" id="txtarea" name="ecode" readonly="yes" rows="20"></textarea>
         <div class="clear">
         </div>
      </form>
      <script type="text/javascript">
         function doencrypt(e){return""==e.code.value?(alert("Gaboleh kosong goblok!"),!1):(enctext=encrypt(e.code.value),codetocopy="<script type='text/javascript'>",codetocopy+="\n",codetocopy+="document.write(unescape('"+enctext+"'));\n",codetocopy+="",codetocopy+="<\/script>",e.ecode.value=codetocopy,!1)}function encrypt(e){var t,o="";for(t=0;t<e.length;t++)o+="%"+hexfromdec(e.charCodeAt(t));return o}function hexfromdec(e){return hex1=Math.round(e/16-.5),hex2=e-16*hex1,""+getletter(hex1)+getletter(hex2)}function getletter(e){return e<10?e:10==e?"A":11==e?"B":12==e?"C":13==e?"D":14==e?"E":15==e?"F":void 0}function code_check(){var e=document.getElementById("txtarea");e.value.indexOf("Paste your code here...")>0&&(e.value="")}function copyToClipboard(){$("#txtarea").select(),document.execCommand("copy")}
      </script><br />
   </div>
</div>
Demo

Script Tools Word Counter

Tools yang satu ini lebih mengarah ke alat SEO, karna tools ini berfungsi untuk mengetahui berapa banyak jumlah karakter dan kata artikel yang kita tulis. Tentunya alat ini sangat bermanfaat ketika ingin mengetahui kualitas artikel yang kita tulis.


<div id="border">
    <textarea id="text" placeholder="Write or copy and paste your document here..."></textarea>
 </div>
 <div class="button-group">
    <br />
    <div id="result">
       <br />
       Words: <span class="wordCount" id="wordCount">0</span>
       <br />
       Total Characters(including trails): <span class="totalChars" id="totalChars">0</span>
       <br />
       Characters (excluding trails): <span class="charCount" id="charCount">0</span>
       <br />
       Characters (excluding all spaces): <span class="charCountNoSpace" id="charCountNoSpace">0</span>
    </div>
 </div>
 <style scoped="" type="text/css">
    .breadcrumbs{display:none;}.darkMode .button-group{background:#444852;}.darkMode textarea{box-shadow:inset 0 0 0 1px rgb(32,36,66);background-color:rgb(32,36,66);}.darkMode #border{background:#2d3158;border:1px solid rgb(32,36,66);}#border{background:rgb(236,240,241);position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgb(236,240,241);}#result{margin:10px auto 30px;color:rgb(255,255,255);}#count{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s;}textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none;}#count:hover,#cssminifier button:active{background:#fff;color:#2980b9;}.button-group{background:#4d6a79;text-align:center;padding:20px;margin:0;border-radius:0 0 5px 5px;float:none;}.button-group span{vertical-align:2px;line-height:1;}.button-group br{display:none;}
    .totalChars{color:#00ff21} .charCount{color: #f55c5c;} .charCountNoSpace{color: #ff8921;} .wordCount{color: #26cdc6;}
 </style>
 <script>
    counter=function(){var t=$("#text").val();if(0==t.length)return $("#wordCount").html(0),$("#totalChars").html(0),$("#charCount").html(0),void $("#charCountNoSpace").html(0);var e=/\s+/gi,n=t.trim().replace(e," ").split(" ").length,o=t.length,r=t.trim().length,c=t.replace(e,"").length;$("#wordCount").html(n),$("#totalChars").html(o),$("#charCount").html(r),$("#charCountNoSpace").html(c)},$(document).ready(function(){$("#count").click(counter),$("#text").change(counter),$("#text").keydown(counter),$("#text").keypress(counter),$("#text").keyup(counter),$("#text").blur(counter),$("#text").focus(counter)});
 </script>
Demo

Script Tools CSS Minifier

Tools ini berfungsi untuk memendekan code CSS yang biasanya panjang dan tidak beraturan menjadi satu baris code yang memanjang dan rapih. Tools ini akan bermanfaat untuk memperingan ukuran file agar tidak terlalu besar.


<div dir="ltr" style="text-align: left;" trbidi="on">
    <div id="cssminifier">
       <style scoped="" type="text/css">.darkMode #cssminifier .button-group{float:none;background:#444852;} .darkMode #cssminifier textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color: white;} .darkMode #cssminifier{background:#2d3158;} #outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;} #post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;} .post-body,.post{background-position:center!important;} .post-body p{margin:0} #blog1,#artikel,.blog-posts{background-position:center!important;} #comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;} #main-wrapper{padding:0;width:100%;border:0} #cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px} #cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2} textarea:focus{background-color:#fff;color:#303030} #cssminifier .box{margin:10px auto 30px;color:#fff;font-size:90%} #cssminifier .box p{margin:0 0 2px} #cssminifier button{cursor:pointer;} #cssminifier .col{width:48%;margin:0 auto 30px} #cssminifier .left{float:left;margin-left:1%} #cssminifier .right{float:right;margin-right:1%} #cssminifier .button-group{float:none;background:#4d6a79;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px} #cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s} #cssminifier button:hover,#cssminifier button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier button[disabled],#cssminifier button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none} #cssminifier br{display:none} .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em} .option-input:hover{background:rgba(255,255,255,.3)} .option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100} .option-input.radio{border-radius:50%} .option-input.radio::after{border-radius:50%} </style>
       <br />
       <span class="clear"></span><br />
       <textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..."></textarea>
       <br />
       <div class="button-group">
          <div class="box">
             <input class="option-input checkbox opt1" id="stripAllComment" type="checkbox" /> <br />
             <label> Strip all comments</label><br />
             <input class="option-input checkbox opt2" id="superCompact" type="checkbox" /> <br />
             <label> Super compact</label><br />
             <input class="option-input checkbox opt3" id="betterIndentation" type="checkbox" /> <br />
             <label> Keep indentation</label><br />
             <input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox" /> <br />
             <label> Remove the last semicolon</label>
          </div>
          <button class="ripplelink" onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button><br />
          <button class="ripplelink" onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <br />
          <button class="ripplelink" onclick="selectAll(&quot;cssField&quot;);">Select All</button>
       </div>
       <div class="clear">
       </div>
       <script type="text/javascript">function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1]; </script><br />
    </div>
 </div>
Demo

Script Tools HTML Parse

Tools ini sangat bermanfaat untuk blog dengan niche tentang edukasi bahasa pemerograman atau blog yang suka memberikan tutorial-tutorial redesign template. Dengan tools ini script yang di masukan ke dalam artikel akan akan di parse dengan character khusus agar tampil dengan baik.


<div dir="ltr" style="text-align: left;" trbidi="on">
    <div id="html-parse">
       <style scoped="" type="text/css">
          .darkMode #html-parse .button-group{float:none;background:#444852;}.darkMode #html-parse textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color:white;}.darkMode #html-parse{background:#2d3158;}#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important;}#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}.post-body,.post{background-position:center!important;}.post-body p{margin:0;}#blog1,#artikel,.blog-posts{background-position:center!important;}#comments,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0;}#main-wrapper{padding:0;width:100%;border:0;}#html-parse{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;}#html-parse textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2;}textarea:focus{background-color:#fff;color:#303030;}#html-parse .box{margin:10px auto 30px;color:#fff;font-size:90%;}#html-parse .box p{margin:0 0 2px;}#html-parse button{cursor:pointer;}#html-parse .col{width:48%;margin:0 auto 30px;}#html-parse .left{float:left;margin-left:1%;}#html-parse .right{float:right;margin-right:1%;}#html-parse .button-group{float:none;background:#4d6a79;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px;}#html-parse button,#html-parse button[disabled]:active{background:rgba(255,255,255,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s;}#html-parse button:hover,#html-parse button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);}#html-parse button[disabled],#html-parse button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12);}#html-parse .opt1,#html-parse .opt2,#html-parse .opt3,#html-parse .opt4,#html-parse .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none;}#html-parse br{display:none;}.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em;}.option-input:hover{background:rgba(255,255,255,.3);}.option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s;}.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px;}.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100;}.option-input.radio{border-radius:50%;}.option-input.radio::after{border-radius:50%;}
          .chartype {color: #ff8d60;}
       </style>
       <br />
       <span class="clear"></span><br />
       <textarea autofocus="" id="codes" placeholder="Paste your HTML code here..."></textarea>
       <br />
       <div class="button-group">
          <div class="box">
             <input checked="" class="option-input checkbox opt1" id="opt1" type="checkbox" /> <br />
             <label> Convert [<span class="chartype">&amp;</span>]</label><br />
             <input checked="" class="option-input checkbox opt2" id="opt2" type="checkbox" /> <br />
             <label> Convert [<span class="chartype">&lt;</span>]</label><br />
             <input checked="" class="option-input checkbox opt3" id="opt3" type="checkbox" /> <br />
             <label> Convert [<span class="chartype">&gt;</span>]</label><br />
             <input checked="" class="option-input checkbox opt4" id="opt4" type="checkbox" /> <br />
             <label> Convert [<span class="chartype">"</span>]</label>
             <input checked="" class="option-input checkbox opt5" id="opt5" type="checkbox" /> <br />
             <label> Convert [<span class="chartype">'</span>]</label>
          </div>
          <button class="ripplelink" onclick="cdConvert();">Convert HTML</button><br />
          <button class="ripplelink" onclick="clearField(&quot;codes&quot;);">Clear Field</button> <br />
          <button class="ripplelink" onclick="selectAll(&quot;codes&quot;);">Select All</button>
       </div>
       <div class="clear">
       </div>
       <script type="text/javascript">
          function get(e){return document.getElementById(e)}function cdConvert(e){var t=document.getElementById("codes"),c=t.value,g=document.getElementById("opt1"),n=document.getElementById("opt2"),l=document.getElementById("opt3"),o=document.getElementById("opt4"),a=document.getElementById("opt5");c=c.replace(/\t/g,"    "),g.checked&&(c=c.replace(/&/g,"&amp;")),n.checked&&(c=c.replace(/</g,"&lt;")),l.checked&&(c=c.replace(/>/g,"&gt;")),o.checked&&(c=c.replace(/"/g,"&quot;")),a.checked&&(c=c.replace(/'/g,"&#039;")),t.value=c}function clearField(e){var t=get(e);t.value="",t.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
       </script><br />
    </div>
 </div>
Demo

Itulah tadi beberapa rangkuman tools yang akan bermanfaat bagi pengunjung dan untuk kita pribadi, sebagai blogger terkadang kita juga membutuhkan alat tertentu untuk membuat suatu konten agar lebih menarik. Semoga 4 Script tools online di atas dapat berguna khususnya bagi pengunjung blog.

4 Script Tools Online Yang Wajib Kamu Pasang Di Blog