Cara Memasang CSS Minifier di Blog Terbaru

Cara Memasang CSS Minifier di Blog Terbaru | Putusujane.id – Halo.. berjumpa lagi. Bagaimana kabarnya nih sahabat semua, semoga baik-baik saja. Kali ini saya membuat postingan langkah cara memasang alat css minifier di blog terbaru. Sahabat sudah tahu belum sama alat CSS Minifier?. CSS Minifier merupakan alat yang digunakan untuk mengkompress kode CSS. Kode CSS disini yang dimaksudkan adalah kode CSS dari tema website atau template blogger. Buat yang suka desain template pasti sudah tidak asing lagi nih.
CSS Minifier

Tujuan dari kompress css yaitu untuk mempercepat loading (membuka) website atau blog. Jadi, kalau web/blog sahabat loadingnya lama nih, bisa jadi kode css di templatenya banyak. Maka dari itu sahabat kompress saja menggunakan alat tersebut. Perubahan loadingnya jadi lumayan cepat. Dengan loading blog cepat, maka dapat meningkatkan SEO (Search Engine Optimization).

Baca juga :

Namun hati-hati, jika anda salah mengkompress css template, biasanya tampilan blognya akan semrawut berantakan. Saran saya sih mending backup simpan dulu cssnya, lalu di kompress. Nantinya jika ada kesalahan, kan bisa dikembalikan lagi dan tidak uring-uringan haha .. .
Berikut untuk melihat demo alat CSS Minifier, langsung saja menuju ke link dibawah ini!. Cara penggunaannya juga sudah saya sediakan.

Daripada banyak basa-basi yang tidak jelas, langsung saja berikut ini adalah tutorial memasang alat css minifier di blog dengan mudah dan ringan. Silahkan disimak dan praktekkan dengan benar.

1. Masuk ke dasbor Blogger > klik icon segitiga hitam terbalik ke bawah > Laman (Page). Tunggu beberapa saat karena masih proses membuka. Jika masih bingung, lihat gambar dibawah!.

Menu Laman Blogger

2. Klik Laman baru (New page) dan tunggu beberapa saat.

Laman Baru (New Page)

3. Ikuti petunjuk dibawah ini!

Membuat CSS Minifier di Blog Terbaru
  • Pertama, beri judul “CSS Minifier” (Tanpa tanda petik).
  • Kedua, klik tab HTML. Jangan klik compose kembali.
  • Ketiga, Copy script dibawah ini dan paste-kan ke kolom nomor tiga.
  • Keempat, klik Publikasikan.

Berikut kode scriptnya :

<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="Pastekan kode CSS anda disini!" 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(/{([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>

4. Selesai. Silahkan anda lihat hasil akhirnya.

Dengan mengikuti langkah-langkah diatas, seharusnya alat ini bisa dipakai. Namun, jika ada kesalahan atau error, silahkan beritahu saya melalui komentar dibawah. Itulah langkah-langkah untuk menambahkan alat css minifier di blog terbaru. Semoga bermanfaat untuk anda semua. Jangan lupa nantikan postingan selanjutnya yang akan datang. Terima kasih dan sampai jumpa.

Salam,
Putu Sujane.

Leave a Reply

Your email address will not be published. Required fields are marked *