Cara Memasang dan Membuat Halaman CSS Minifier di Blog

Pediaku ID
Sep 28, 2024

CSS minifier atau CSS Minify adalah sebuah tools yang berfungsi untuk mengkompress kode script CSS agar ukurannya menjadi lebih kecil dan ringan. Untuk menggunakan CSS minifier biasanya menggunakan pihak ketiga, namun kamu bisa membuat tools CSS minifier ini di blog sendiri.

Sekilas Tentang Fungsi dan Pentingnya CSS Minifier

Dalam sebuah website atau kerangka situs keberadaan CSS Cascading Style Sheets sangat penting karena berfungsi untuk mengatur tata letak, font, warna, ukuran, efek dan masih banyak lagi.

Semakin besar dan komplek suatu website atau file CSS maka ukurannyapun juga akan semakin besar yang akan membuat loading blog atau website menjadi lebih lama, karena browser butuh waktu untuk mendownload css dan memprosesnya.

Karena itulah, hadirlah sebuah tools web bernama CSS minifier atau lebih sering kita sebut CSS minify, yang sederhanya ia berfungsi untuk mengkompress ukuran CSS menjadi lebih kecil dari semula.

Beberapa dampak penggunaan CSS minifier antara lain seperti

  1. Waktu Muat Lebih Cepat: Ukuran file CSS yang lebih kecil berarti website Anda akan memuat lebih cepat, yang penting untuk pengalaman pengguna dan SEO. 
  2. Kinerja Website yang Lebih Baik: Ukuran file CSS yang lebih kecil akan mengurangi jumlah data yang perlu ditransfer dari server ke browser pengguna, meningkatkan kinerja website. 
  3. Beban Server yang Lebih Rendah: Dengan ukuran file CSS yang lebih kecil, server Anda akan perlu menangani lebih sedikit data, mengurangi beban server dan meningkatkan waktu respons server. 
  4. SEO yang Lebih Baik: Google dan mesin pencari lainnya memberikan prioritas pada website dengan waktu muat cepat, sehingga meningkatkan kinerja website Anda dapat memiliki dampak positif pada peringkat mesin pencari Anda.

Cara Memasang Tools CSS Minifier di Blog

Biasanya untuk meminify CSS kita menggunakan web pihak ketiga, namun ternyata kita juga bisa memasang tools ini di blog sendiri sehingga lebih hemat waktu dan juga menambah profesional web sendiri karena menyediakan tools blog sendiri. Caranya pun sangat mudah, kamu hanya perlu menyalin kode Scipt berikut dan memasangnya di halaman blog dan kemudian publikasikan.

<div dir="ltr" style="text-align: left;" trbidi="on">
    <div id="cssminifier">
       <style scoped="" type="text/css">.night-mode #cssminifier .button-group{float:none;background:#444852;} .night-mode #cssminifier textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color: white;} .night-mode #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:1em 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:'\2713';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%} .flex{display: flex;display: -webkit-flex;display: -moz-flex;align-items: center;-webkit-align-items: center;-moz-align-items: center;justify-content: space-around;-webkit-justify-content: space-around;-moz-justify-content: space-around;margin-bottom: 3em;flex-wrap: wrap;-webkit-flex-wrap: wrap }</style>
       <br />
       <span class="clear"></span><br />
       <textarea autofocus="" id="cssField" placeholder="Salin kode CSS di sini ..."></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>
          <div class="flex">
          <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> <br />
          <button class="ripplelink" onclick="copyAll(&quot;cssField&quot;);">Copy to Clipboard</button>
          </div>
       </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];function copyAll(){var e=document.getElementById("cssField");e.select(),e.setSelectionRange(0,99999),document.execCommand("copy"),alert("Copied the text: "+e.value)}</script><br />
    </div>
 </div>

Cara Membuat Halaman Tools CSS Minifier di Blogspot

Jika kamu pengguna blogspot, untuk membuat tools css minify dan memasangnya di blog ikuti langkah berikut

  1. Buka Blogger > Pilih Menu Halaman
  2. Buat Halaman Baru > Pilih penulisan HTML
  3. Buat judul halaman > Pastekan script diatas > dan Publikasikan
    4. Hasilnya akan terlihat kurang lebih seperti ini.














Cara Membuat Halaman CSS Minifier di Wordpress

Jika kmau pengguna wordpress, berikut cara memasang tools css minify di wordpress

  1. Buka dashboard wordpress
  2. Pada bagian halaman pilih > New page
  3. Beri judul halaman > Tambahkan block html dan pastekan script diatas
  4. terakhir klik publish

Penutup

Itulah panduan bagaimana cara membuat dan memasang tools css minifier sendiri di blog. Tools ini cukup bermanfaat digunakan oleh blogger terlebih jika kamu sedang berusaha mempercepat loading blog

Pediaku ID

Pediaku ID

Halo, saya penulis Pediaku ID yang suka membahas semua hal tentang tips, interne, dunia blogging dan pendidikan. Ikuti juga media sosial penulis

Next Post Previous Post
No Comment
Add Comment
comment url