Cara membuat Halaman Tools Css Minifier di Blogger

Halo sobat blogger semua, selamat datang di blog sederhana www.arieffsetiawan.com pada postingan artikel kali ini saya akan berbagi sedikit Pengalaman cara membuat Tools Css minifier di blogger Dengan Mudah, dan semoga saja apa yang saya bagikan kali ini ada manfaatnya buat rekan rekan blogger semuanya.

CSS minifier adalah sebuah tools yang biasa digunakan untuk mengompress kode CSS agar ukurannya menjadi lebih kecil, sehingga akan membuat website anda lebih cepat Diakses . Anda tidak perlu menggunakan tools dari pihak ketiga, dan anda bisa membuat halaman CSS minifier sendiri di blog dengan sangat mudah.

Kecepatan pagespeed adalah faktor penting yang harus dimiliki oleh sebuah website. Semakin cepat diakses, semakin banyak pula efek positif yang bisa didapat oleh sebuah blog atau website.

Salah satu cara untuk mempercepat loading sebuah blog/website adalah dengan mengkompress file CSS. File CSS sendiri merupakan singkatan dari Cascading Style Sheets yang fungsinya mengatur tampilan masing masing elemen HTML agar tampak baik saat muncul di layar ponsel atau Destop.

Untuk memperkecil ukuran CSS, saat ini ada banyak tools kompresi CSS online seperti CSS Minifier, CSS Compressor, Minifier.org, Clean CSS, dan masih banyak lagi situs lainya. Cukup salin kode CSS lalu Tempel, maka situs situs tersebut akan menghapus beberapa bagian tidak penting sehingga saat disimpan ukurannya akan menjadi semakin kecil.

Nah pada postingan artikel kali ini, saya akan berbagi Triks cara membuat sendiri halaman CSS Minifier pada blog agar anda tidak perlu bolak balik ke situs situs tersebut hanya untuk mengkompresi file CSS. Hasilnya pun juga tidak kalah bagus jika dibandingkan dengan tools online lainnya seperti situs situs yang saya sebutkan di atas.

Cara Membuat Tools CSS Minifier di Blogger

Untuk membuat Halaman Css minifier Di blogger caranya pun sangat mudah, Langkah pertama yang harus anda lakukan adalah Copy Kode Css Berikut:


<div id="cssminifier"> <style scoped="" type="text/css">#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}#cssminifier 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}textarea:focus{background-color:#FFF;color:#303030}#cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}#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{background:#333;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,0.2);text-align:center;color:#fff;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}#cssminifier button:hover,#cssminifier button:active{background:#f7f7f7;color:#222}#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}#cssminifier br{display:none}</style> <span class="clear"></span><textarea autofocus="" id="cssField" placeholder="Masukan Kode CSS Disini..." spellcheck="false"></textarea><div class="button-group"><div class="box"><input class="opt1" id="stripAllComment" type="checkbox" /> <label for="stripAllComment">Strip all comments</label><input class="opt2" id="superCompact" type="checkbox" /> <label for="superCompact">Super compact</label><input class="opt3" id="betterIndentation" type="checkbox" /> <label for="betterIndentation">Keep indentation</label><input checked="" class="opt4" id="keepLastComma" type="checkbox" /> <label for="keepLastComma">Remove the last semicolon</label></div><button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button><button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <button 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> </div>

Selanjutnya Login ke akun Blogger anda masing masing Buat halaman baru dengan memilih menu HALAMAN ➡ HALAMAN BARU Beri judul halaman yang sesuai seperti CSS Minifier atau semacamnya Ubah editor teks menjadi HTML lalu Tempel kode di atas yang tadi sudah anda salin Klik SIMPAN dan publikasikan.

DEMO CSS MINIFIER
Cara Kerjanya CSS Minifier ini Secara singkat, CSS Minifier ini bekerja dengan cara menghapus beberapa bagian yang tidak perlu tanpa merusak fungsi kode CSS itu sendiri. Sebagai contoh, komentar, spasi, indent, serta semicolon terakhir dapat dihapus tanpa khawatir membuat kode CSS tidak bekerja.

Lalu bagaimana Kinerja Script Ini Dibanding Tools CSS Minifier Lainnya?

Saat ini memang sudah ada banyak tools CSS minifier gratis yang bisa dengan mudah kita temukan di internet. Namun setelah saya membandingkan Script di atas dengan Tools online lainya, Teryata hasilnya Menurut saya kurang lebih sama saja dan sangat baik

Cukup sampai disini dulu ya perjumpaan kita pada postingan artikel kali ini. Semoga bisa membantu Rekan rekan blogger semua. dan Tak lupa saya ucapkan Banyak banyak terima kasih atas waktu dan kunjungan anda semua.