Cara Membuat Tools CSS Minifier di Blog

GEMA.MY.ID
GEMA.MY.ID
Friday, February 12, 2021
Cara Membuat Tools CSS Minifier di Blog

Cara Membuat Tools CSS Minify di Blog - Bagi yang sering melakukan kodingan mungkin akan sangat familiar dengan tools yang akan saya bahas kali ini. Ya, CSS Minifier adalah alat yang berguna untuk mengkompres atau meminimalkan struktur kode CSS agar ukuran file menjadi lebih kecil dan ringan.

Seperti yang kita tahu, besar kecilnya ukuran CSS atau Cascading Style Sheets sangat berpengaruh pada kecepatan akses saat dimuat oleh pengunjung.

Jika hanya ingin sekedar menggunakan, sudah banyak website yang menyediakan tools minifier tersebut secara online. Namun kenapa tidak membuat sendiri? Selain mudah, Anda tidak perlu lagi bergantung pada satu sumber yang hanya akan menguntungkan website orang lain.

Clean CSS tinyurl.com/f1rvktl4
FreeFormatter tinyurl.com/4ww7ze5b
Minify tinyurl.com/48xxwt49

Selain itu, pembaca bisa saja menjadikan blog Anda sebagai tempat untuk melakukan peminimalan struktur CSS yang akan digunakan. Dari situlah trafik akan menjadi semakin meningkat dari waktu ke waktu.

Oh iya, pada artikel sebelumnya, saya juga telah memberikan tutorial cara membuat tools parse script di blog. Bagi Anda yang juga berniat untuk membuat jenis tools tersebut, silahkan membuka link berikut:

Baca Juga: Cara Membuat Tools Parse Script di Blog

Kembali ke pembahasan, bagaimana sih tampilan tools setelah penerapan? Untuk lebih jelasnya, berikut adalah tampilannya:

CSS Minifier

Bagaimana, tertarik? Jika tertarik, silahkan dibaca sampai habis sambil melakukan penerapan pada blog Anda. Happy reading!

Cara Membuat Tools CSS Minifier di Blog

  • Masuk ke BLOGGER
  • Pilih menu HALAMAN
  • Pilih HALAMAN BARU
  • Tempel di mode TAMPILAN HTML:
    • <div id="cssminifier">
    <style scoped="">
    #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:#f4f4f4;padding:18px;font:normal 13px 'Fira Mono', 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:#f4f4f4;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:#344f61;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:#fefefe;display:inline-block;padding:6px 12px;font-family:'Poppins',sans-serif;font-size:15px;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:#fff;color:#344f61}
    #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="Paste your CSS here..." spellcheck="false"></textarea>
    <div class="button-group">
    <div class="box">
    <input class="opt1" id="stripAllComment" type="checkbox"/> 
    <label>Comments</label>
    <input class="opt2" id="superCompact" type="checkbox"/> 
    <label>Compact</label>
    <input class="opt3" id="betterIndentation" type="checkbox"/> 
    <label>Indentation</label>
    <input checked="" class="opt4" id="keepLastComma" type="checkbox"/> 
    <label>Semicolon</label>
    </div>
    <button onclick="compressCSS(&quot;cssField&quot;);">Minify</button>
    <button onclick="clearField(&quot;cssField&quot;);">Clear</button> 
    <button onclick="selectAll(&quot;cssField&quot;);">Select</button>
    </div>
    <div class="clear">
    </div>
    <script>
    function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/{([sS]+?)}/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(/{([sS]+?)}/g,function(e){return e.replace(/([(){}[]:;,]+)/g,"<span class='pn'>$1</span>").replace(/!important/gi,"<span class='im'>!important</span>")}),a=a.replace(//*([wW]+?)*//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)(.*?){([sS]+?)?}}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(//*[wW]*?*//gm,""):n.replace(/(n+)?(/*[wW]*?*/)(n+)?/gm,"n$2n"),n=n.replace(/([nrts ]+)?([,:;{}]+?)([nrts ]+)?/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>
  • Selesai.

Setelah melakukan pemasangan skrip, silahkan lakukan peninjauan terlebih dahulu. Jika memang ada yang perlu disesuaikan, silahkan atur berdasarkan pengetahuan Anda dalam bidang kodingan.

Penjelasan Fitur

Pada tools tersebut, ada empat jenis pilihan yang bisa Anda gunakan, yaitu Comments, Compact, Indentation, dan Semicolon. Setiap pilihan mempunyai fungsinya masing-masing yang dijelaskan berdasarkan skrip awal berikut:

/* First Name */
.feris {
  width: 100%;
  height: auto;
}

/* Last Name */
.prayuda {
  color: #ffffff;
  background-color: #009ee0;
}

Comments

Berguna untuk meminimalisir skrip sambil menghapus setiap komentar dengan format penulisan /*...*/.

.feris{width:100%;height:auto;}
.prayuda{color:#ffffff;background-color:#009ee0;}

Compact

Berguna untuk meminimalisir skrip sambil menyambung setiap nama kelas CSS. Selain itu, komentar juga akan ikut terhapus.

.feris{width:100%;height:auto;}.prayuda{color:#ffffff;background-color:#009ee0;}

Indentation

Berguna untuk meminimalisir skrip dengan tetap mengikuti format penulisan yang diinput ke dalam kolom.

/* First Name */
.feris{width:100%;height:auto;}
/* Last Name */
.prayuda{color:#ffffff;background-color:#009ee0;}

Semicolon

Berguna untuk meminimalisir skrip sambil menghapus titik koma ; pada akhir baris properti dan nilai CSS.

/* First Name */
.feris{width:100%;height:auto}
/* Last Name */
.prayuda{color:#ffffff;background-color:#009ee0}

Cara Minify CSS

Sebagai tambahan untuk artikel kali ini, Anda bisa langsung melakukan peminimalan dengan menempel skrip ke kolom yang tersedia. Setelah itu, pilih salah satu dari empat jenis fungsi yang telah saya jelaskan di atas.

Setelah pemilihan, silahkan langsung saja pilih MINIFY. Oh iya, CLEAR berfungsi untuk membersihkan skrip yang ada di dalam kolom. Sedangkan SELECT berfungsi untuk menyeleksi semua skrip yang ada di dalam kolom.

Penutup

Tools minifier Anda sekarang telah terbuat. Silahkan salin URL halaman tersebut untuk digunakan di menu navigasi.

Untuk sekarang hanya satu tampilan, namun tidak menutup kemungkinan untuk bertambah apabila ada tools lain yang juga menarik untuk digunakan di blog.

Baca Juga: Cara Membuat Script Box Keren di Postingan Blog

Cukup sekian artikel tentang Cara Membuat Tools CSS Minify di Blog ini, Terima kasih.

edit Tags: Blog
LihatTutupKomentar
Cancel