√ Cara Membuat CSS Minifier di Blog - Gubuk Pintar
Cara Membuat CSS Minifier di Blog
Cara Membuat CSS Minifier di Blog

Cara Membuat CSS Minifier di Blog

Temukan cara membuat CSS Minifier di Blog dalam artikel berikut ini!

Cara Membuat CSS Minifier di Blog
Cara membuat CSS Minifier di blog ini akan sangat berguna untuk kamu yang ingin meningkatkan kecepatan loading blog.

CSS (Cascading Style Sheet) merupakan salah satu elemen yang ada dalam template blog kita untuk mengatur tampilan sebuah objek dalam dokumen HTML.

Oleh karenanya, penambahan kode CSS tentu berpengaruh terhadap ukuran dokumen HTML tersebut. Dalam konteks blog, semakin besar ukuran dokumen HTML template maka semakin lama pula proses loading halaman berlangsung sehingga menekan ukurannya dengan me-minify CSS cukup penting.

Gubuk Pintar akan membagikan cara membuat CSS Minifier mandiri di blog mu kali ini. Yuk, kita ke bagian artikel selanjutnya!




Apa Itu CSS Minifier?

CSS Minifier adalah alat yang berfungsi untuk menghilangkan karakter yang tidak dibutuhkan dalam sebuah dokumen yang mengandung kode CSS. 
 
Proses minify yang dilakukan berpengaruh terhadap ukuran dokumen yang semakin kecil sehingga memperkecil bandwith yang dibutuhkan untuk mengakses situs dan mempercepat waktu respon server untuk membukanya.

Sejatinya, ada banyak situs yang memberikan akses CSS Minifier secara gratis, seperti
Namun memilikinya sendiri tentu membuat mu lebih mandiri dan tak harus 'pergi' kesana-kemari untuk melakukannya.
 

Cara Membuat CSS Minifier di Blog

Cara yang berikut ini dapat bekerja baik di Blogger maupun WordPress tetapi khusus untuk panduan berikut ini akan dipraktekkan pada Blogger saja. Kamu dapat membuatnya di halaman statis blog mu dengan mengikuti lengkah-langkah berikut ini,
  1. Buka dasbor Blogger dan Pilih tab Halaman

  2. Buat Halaman baru

  3. Pilih penulisan mode HTML

  4. Copy dan Paste kode berikut ini,

    <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:#FF1744;text-align:center;padding:5px 5px 10px 10px;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"></textarea>
    <br />
    <div class="button-group">
    <div class="box"><input class="option-input checkbox opt1" id="stripAllComment" type="checkbox" /> <br />
    <label> Delete 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 Semicolon</label>
    </div>
    <div class="flex">
    <button class="ripplelink" onclick="compressCSS(&quot;cssField&quot;);">Minify 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 All 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>

  5. Publikasikan
Contoh dari penggunaan kode diatas adalah halaman CSS Minifier Gubuk Pintar yang dapat kamu lihat berikut ini,


Penjelasan Fitur CSS Minifier

Ada beberapa fitur yang ditambahkan dalam CSS Minifier diatas. Kita akan menggunakan kode berikut ini untuk melihat bagaimana setiap fitur bekerja.
 
/* Gubuk */
    .gubuk {
        width: 100%;
        height: auto;
        font-weight: 400px;
}

/* Pintar */
    .pintar {
        color: #ff1744;
        background-color: #009ee0;
        font-color: #fff;
}
 
Fitur yang tersedia antara lain,
  • Delete Comments
    Berfungsi untuk menghapus kode yang berupa komentar, umumnya berbentuk /*.....*/

    .gubuk{width:100%;height:auto;font-weight:400px;}
    .pintar{color:#ff1744;background-color:#009ee0;font-color:#fff;}

  • Super Compact
    Berfungsi untuk meminimalisir baris dengan menggabungkan kode yang berbeda identitas ke dalam satu baris yang sama. Hasilnya adalah seperti berikut ini,

    .gubuk{width:100%;height:auto;font-weight:400px;}.pintar{color:#ff1744;background-color:#009ee0;font-color:#fff;}

  • Keep Indentation
    Berfungsi untuk menghemat baris dengan menyatukan kode yang berindentitas sama ke dalam satu bagian. Hasilnya tampak seperti ini,

    /* Gubuk */
    .gubuk{width:100%;height:auto;font-weight:400px;}
    /* Pintar */
    .pintar{color:#ff1744;background-color:#009ee0;font-color:#fff;}

  • Remove Semicolon
    Berfungsi untuk menghapus titik koma yang ada dalam CSS. Berikut ini contohnya,

    /* Gubuk */
    .gubuk{width:100%;height:auto;font-weight:400px}
    /* Pintar */
    .pintar{color:#ff1744;background-color:#009ee0;font-color:#fff}

Cara Menggunakan CSS Minifier

Sebelumnya, kamu sudah tahu tentang fitur-fitur yang tersedia di alat ini. Nah, sekarang kita masuk ke cara menggunakannya.
 
Terdapat empat tombol yang berfungsi aktif yaitu,
  • Minify
    Berfungsing untuk melangsungkan proses minify.

  • Clear
    Berfungsi untuk menghapus seluruh kode yang ada di kotak CSS Minifer.

  • Select All
    Berfungsi untuk menyeleksi seluruh kode yang ada di kotak CSS Minifier.

  • Copy All to Clipboard
    Berfungsi untuk copy seluruh kode yang ada di kotak CSS Minifer.
 
Untuk melakukan Minify CSS, kamu cukup copy dan paste kode CSS yang ingin kamu minify kemudian pilih fitur yang kamu inginkan dan klik Minify. Selanjutnya, kamu dapat kode hasil minify dengan tombol Copy All to Clipboard

Penutup

Seperti itulah cara membuat CSS Minifier di blog dan menggunakannya. Semoga kini kamu dapat mengoptimalkan loading blog mu dengan alat ini ya.

***

Apabila memiliki pertanyaan seputar artikel Cara Membuat CSS Minifier di Blog, silahkan tulis dikolom komentar ya.

Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!

Baca juga:

Gubuk Pintar
"If you waiting for idea for write than you're not a writter. You just a waiter"
Buka Komentar

0 komentar:

Posting Komentar