Cara Memasang Tools CSS Minifier di Blog

CSS Minifier adalah tools yang berfungsi untuk meng-compress kode CSS agar menjadikan kode css didalam blog menjadi lebih ringan saat di proses. Tools ini sangat bermanfaat di blog karena dapat mempercepat kinerja situs. 

Cara kerja toolsnya ini gimana kak? jelasin dong?

Cara kerjanya sangat simple kok, yaitu mengubah kode CSS yang awalnya bahasa manusia ke dalam bahasa HTML (program). Atau dapat disebut juga dengan translate. Gunanya tools ini untuk, membuat si template memahami semua kode html yang ada didalam blog dengan cepat. Jadi kalau template sobat masih bahasa manusia seperti font-family, height, width atau dll, si template masih mikir. Beda sama yg udah di tranlasikan. Begitulah kira-kira cara kerja tools ini. 

Tapi untuk kali ini, aku tidak membahas cara mempercepat blognya tapi yang aku bahas kali ini cara membuat toolsnya dulu. Mungkin dilain waktu akan aku bagikan. Jika sobat berminat memasang tools ini, silahkan ikuti panduannya dibawah ini.

Memasang Tools CSS Minifier di Blog

#1. Buka bloggger.
#2. Pilih menu halaman > pilih halaman baru.

#3. Setelah itu ganti dari Compose ke HTML, seperti gambar dibawah  ini.

#4. Kemudian copy kode dibawah dan pastekan didalamnya.

Halaman Ini Berfungsi untuk meng-compress kode CSS di Blog sobat agar penggunaan CSS dalam blog lebih ringan.
<center>
<div id="cssmini">
<style scoped="" type="text/css">
#cssmini{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssmini 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}
#cssmini .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssmini .box p{margin:0 0 2px}
#cssmini button{cursor:pointer;}
#cssmini .col{width:48%;margin:0 auto 30px}
#cssmini .left{float:left;margin-left:1%}
#cssmini .right{float:right;margin-right:1%}
#cssmini .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssmini button,#cssmini 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}
#cssmini button:hover,#cssmini button:active{background:#fff;color:#2980b9}
#cssmini button[disabled],#cssmini button[disabled]:active{background:#fff;}
#cssmini .opt1,#cssmini .opt2,#cssmini .opt3,#cssmini .opt4,#cssmini .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssmini br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Letakan Code CSS Anda Disini..." spellcheck="false"></textarea>
<br />
<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>
</center>
<br />

#5. Lalu langsung saja klik publikasikan.
#6. Selesai.

Demo

Buat loading blog kamu lebih hidup dengan memasang animasi bergerak lucu caranya : Baca disini.

Saran : jangan terlalu banyak menggunakan kode CSS didalam blog, karna akan membuat proses didalam blog sobat akan terasa lambat atau lama. Hias blog dengan kode css sederhana saja tapi unik, agar blog sobat terlihat rapi dan enak dipandang. 

Tidak perlu menghias blog dengan memasukkan kode-kode CSS dan JavaScript berlebihan. Nanti blog sobat akan terasa berat dan lelet saat di browsing di komputer, apalagi saat di browsing di hp, pasti sangat berat atau lelet untuk diakses. Jadi, gunain yang biasa aja dulu.

Mungkin itu aja yang dapat aku bagikan hari ini. Semoga artikel ini dapat membantu sobat dan bermanfaat. Dipersilahkan bagi yang ingin bertanya, silahkan bertanya di kolom komentar. Terima kasih.

Mas Galih

• Share
• Share

Dapatkan Tips Menarik Setiap Harinya!

• Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
• Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
• Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense