Cara Memasang Tools CSS Minifier pada Halaman Statis Blog

Dalam dunia bloging pasti tidak asing dengan istilah CSS. Dikutip dari Hostinger, CSS atau Cascading Style Sheet adalah kode yang digunakan untuk mengatur tampilan elemen yang biasanya tertulis dalam bahasa HTML dan berfungsi untuk memisahkan sebuah konten dari tampilan visualnya.

Nah, seperti yang sudah saya sebutkan diatas, hubungan CSS dengan Blogging sangat erat. Bisa dibilang CSS adalah kerangka sebuah blog. 

CSS Minifier BocahSihir.info

Dalam postingan kali ini saya akan berbagi cara membuat atau memasang Tools CSS Minifier yang bisa sobat letakan pada blog agar bisa membatu teman-teman lainnya yang sedang membutuhkan jasa Kompres CSS. Yah memang ada beberapa orang yang menginginkan blog yang dikelolanya menjadi sangat cepat loadingnya. Nah salah satu cara yang digunakan adalah dengan meng-kompres kode CSS yang ada.

Baca: Cara Mempercepat Loading Blog Terbaru

Dengan meng-kompres CSS yang ada di blog tidak hanya akan mempercepat loading blog, tetapi juga akan beresiko menghilangkan beberapa fasilitas bawaan dari CSS asli sebelum di kompres. Terserah sobat, ini adalah pilihan.

Cara Memasang CSS Minifier di Blog

Jika sobat menginginkan blog yang mempunyai banyak fasilitas untuk membantu teman-teman yang lain dalam mengkompres CSS, maka memasang CSS Minifier ini bisa sobat coba dan menerapkannya pada blog sobat sendiri.

Langkah pertama adalah masuk ke Dasbor Blogger, pilih Halaman dan klik Halaman Baru

Kedua pilih mode HTML, bukan Compose

Salin kode dibawah ini dan paste-kan pada Halaman Baru tersebut

<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:#2980b9;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-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:#fff;color:#2980b9}
#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 code here..." 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>

Catatan: sobat bisa mengeditnya agar sesuai dengan tampilan blog sendiri

Setelah selesai, CSS Minifier siap untuk di Publikasikan

Namun jika sobat menginginkan tampilannya full, maka sobat perlu membaca postingan saya sebelumnya yaitu Cara Membuat Tampilan Halaman Statis Menjadi Full Screen.

Sejauh ini CSS Minifier yang sobat buat sudah terpublikasikan, namun bagaimana cara memasangnya pada halaman statis? Yang perlu sobat lakukan adalah Edit HTML. Jika menggunakan Template Viomagz, maka ikuti langkah-langkah pemasangannya berikut ini

Pertama cari kode dibawah ini menggunakan CTRL+F

<nav id='cssmenu'>

Jika sudah ketemu maka akan dijumpai susunan kode untuk memasangnya

<li><a haref='#'><i aria-hidden='true' class='fa fa-wrench'/> TOOLS</a>
  <ul>
    <li><a href='https://www.bocahsihir.info/p/parse.html'>PARSE HTML</a></li>
    <li><a href='https://www.bocahsihir.info/p/word-counters-by-mang-otep-blog-mang.html'>PENGHITUNG KATA</a></li>
    <li><a href='https://www.bocahsihir.info/p/css-minifier.html'>KOMPRES CSS</a></li> 
  </ul>
  </li> 

Kode diatas adalah menu dropdown yang ada di Blog BocahSihir.info ini, karena saya memasang Tools-nya di menu tersebut. Silahkan sobat bisa mengeditnya sesuai URL dari halaman statis yang sudah sobat buat dan memasangnya di menu dropdown seperti saya atau bisa menempatkannya di halaman statis dibagian footer blog.

Tentu saja jika sobat menggunakan template lain, maka kode yang dicari akan berbeda tetapi cara yang digunakan tetap sama.

Jadi tunggu apa lagi buat sobat yang ingin memasang CSS Minifier, cara-cara diatas patut untuk dicoba.

Berbagi :