Cara Membuat Tool Unminify JS, CSS and HTML di Blog Sendiri

panduan-blogger , web-tools    Comment   

Cara Membuat Unminify di Blog - Unminify biasa digunakan untuk mengembalikan kode JavaScript, CSS dan HTML yang sudah di Minify atau dikumpres dengan tujuan di Minify agar blog atau website lebih ringan sehingga loadingnya sangat cepat.

Namun ketika kode CSS atau HTMl pada template blogger yang sudah di Minify kita bakal kesulita saat mengeditnya sehingga perlu di unminify terlebih dulu agar rapi.

Menurut saya sendiri CSS yang di minify masih mudah saat pengeditan namun jika HTML atau JS yang di Minify sangat sulit untuk mengeditnya sehingga harus di unminify.

Untuk Unminify JS, CSS dan HTML code kita biasanya harus masuk dulu ke situs unminify.com karena itu website tool unminify yang banyak digunakan, nah sekarang admin mau bagi cara membuat unminify di blog sendir dengan mudah.

Selain itu admin juga membuat tutorial cara membuat tool minify di blog jika jadi silahkan lihat juga ya.

Cara Membuat Tool Unminify di Blog

1. Pertama masuk dulu ke blogger.com
2. Pilih menu halaman kemudian klik halaman baru dan pilih fitur HTML jangan Compose
3. Kemudian pastekan semua kode di bawah ini

 <style type="text/css">#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important} #sidebar-wrapper{display:none!important;float:left;margin:0}.post{width:95%}</style><style type='text/css'>textarea{min-height:40em;font-size:15px}</style><div class="container-fluid"><div class="row"><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><h2><strong>Input</strong></h2><form class="form-group"><textarea id="textarea" name="textarea" class="form-control" autofocus="" placeholder="Paste JS, CSS, HTML or XML Code to unminify/format..."></textarea></form></div><div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><h2><strong>Output</strong></h2><form class="form-group"><textarea id="output" class="form-control" readonly=""></textarea></form></div></div><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><a class="btn btn-danger" id="erase"><i class="glyphicon glyphicon-remove"></i>Clear</a><a class="btn btn-success" id="copy"><i class="glyphicon glyphicon-paste"></i>Copy</a></div></div></div><link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><script src='//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.min.js'></script><script type="text/javascript">function isCss(a){if(/\w+\s*?\{[\s\S]+?\}/.test(a)&&!/<(style).*?>[\s\S]+?<\/\1>/.test(a)){return!0}} function isJs(a){if((/function\s*?\w+\s*?\(.*?\)\s*?\{[\s\S]+?\}/.test(a)||/var\s*?\w+\s*?\=/.test(a))&&!/<(script).*?>[\s\S]+?<\/\1>/.test(a)){return!0}} function isHtml(a){if(/<(\w+).*?>[\s\S]+?<\/\1>/.test(a)){return!0}} document.getElementById("textarea").addEventListener("keyup",function(){var a=this.value;if(isCss(a)&&!isJs(a)){a=css_beautify(a)}else if(isJs(a)){a=js_beautify(a)}else if(isHtml(a)){a=html_beautify(a)}else{a=html_beautify(a)} document.getElementById("output").value=a}) document.getElementById("copy").addEventListener("click",function(){var a=document.getElementById("textarea");a.select();try{var b=document.execCommand('copy')}catch(err){alert('Oops, unable to copy !')}}) document.getElementById("erase").addEventListener("click",function(){var a=document.getElementById("textarea");var b=document.getElementById("output");a.value="";b.value="";a.focus()})</script> 

4. Jangan lupa kasih judul dan deskripsi agar lebih lengkap kemudain klik tombol Simpan.

Penutup

Jadi itulah tutorial cara membuat unminify di blog sendri dengan mudah dan simpel dan keren dan badai wkwkwkw... terimakasih sudah mengikuti tutorial dari admin semoga bermanfaat.

SumberReferensi: Bloggersukses.id