Unminify - Cara Membuat Unminify JS CSS and HTML di Blog Sendiri

Free online tool Unminify JS, CSS and HTML code - siapa disini yang suka Unminify code javaScript, CSS, dan HTML di https://unminify.com, kini anda dapat membuatnya di blog pribadi.

Jika memang benar anda adalah orang yang suka bolak balik ke situs tool unminify.com keni ada solusi paling tepat agar tidak ribet lagi dengan membuat online tool unminify di blog sendiri.

Unminify Cara Membuat Unminify JS CSS and HTML di Blog Sendiri blogger sukses
Tapi sebelumnya mungkin ada yang bingun apa itu unminify, oke saya akan bahas sedikit karena mungkin ada yang masih awam dengan ini.

Apa itu unminify...?

Unminify adalah kebalikan dari minify, dimana kode kode Js, CSS dan HTMl yang di minify atau di kompres jadi satu file yang tadinya js, css dan html yang tersusun rapi dan setelah di minify maka jadi satu file guna untuk mempercepat loading pada blog atau website.

Jika masih bingung, perhatikan gambar berikut:

Ini adalah gamabr kode html yang tersusun rapi (Sebelum di Minify)

Minify

Nah jika sudah di minify maka kode html di atas akan seperti gambar dibawah ini yang tadinya rapi sekarang jadi satu jajar yang panjang. Untuk mengembalikan ke semula menjadi rapi kita tidak mungkin merapikanya satu persatu terlebih jika kode html atau css nya banyak, nah fungsi unminify tool ini adalah untuk mengembalikan kode js, css dan html yang sudah di mninify.

unminify

Sekarang udah taukan apa kegunaan dari unminify ya un atau membatalkan.

Oke..

Jadi bagaimana cara membuat unminify di blog...?

Yang admin tau di blog blog biasanya cuman meyediakan free tool Parse HTML, Minify CSS, dan Code Warna itu yang paling umun dan jarang ada yang menyediakan unminidy, nah pada kesempatan kali ini saya akan membuatkan tutorial cara membuat unminify di blog sendiri.

Cara membuat Unminify di Blog 

Berikut langkah-langkahnya:

Langkap 1 : Masuk Blogger

Seperti biasa pastikan anda sudah masuk dashboard blogger.com

Langkah 2 : Buat Halaman Baru 

Jika sudah masuk dashboard, kemudian pilih menu halaman terus klik halaman baru dan pilih mode editornya menjadi HTML (Bukan Compose) kemudian kasih Judul dan pastekan semua kode di bawah:

<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>

Langkah 3 : Simpan dan Lihat Hasil

Jika sudah diletakan klik tombol simpan dan jangan lupa kasih Deskripsi, sekarang silahkan lihat hasilnya atau lihat demo di bawah:

Demo

Nah!!! giamana kerenkannnn online tool barunya.

Penutup...

Itulah tutorial cara membuat unminify JS CSS and HTML di blog sendiri dengan mudah dan sekarang punya tool unminify sendiri.

Terim kasih sudah mengikuti tutorial dari bloggersukses.id sampai selesai semoga bermanfaat dan jangan sungkan untuk berkunjung kembali atau silahkan ikuti blog blogger sukses agar mendafatkan update artikel terbaru dari admin.

Follow Me

Terima kasih lagi karena sudah mengikuti semoga sukses selalu.
Buka Komentar

0 Response to "Unminify - Cara Membuat Unminify JS CSS and HTML di Blog Sendiri"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel