Cara Memasang CSS Compressor di Blog

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Memasang CSS Compressor di Blog, Postingan ini masih berhubungan dengan Artikel Tutorial Blog. Artikel Widget.

Baca juga:

Cara Memasang CSS Compressor di Blog

Advertisement

Cara Memasang/ membuat CSS Miniffier - Halo kawan, kali ini saya akan membagikan cara salah satu tools yang cukup penting bagi anda yang suka otak-atik template blog yaitu CSS compressor, kegunaan tool ini yaitu untuk mengkompres/ memperkecil kode CSS yang terdapat dalam template blog sehingga dapat untuk mempercepat loading blog anda. Bagi anda yang suka memodifikasi template, saya sangat menyarankan kepada anda untuk memasangnya di blog anda agar ketika anda membutuhkannya anda tanpa harus mondar-mandir mencari tools berikut.

Tool di atas sangatlah bagus untuk di gunakan mengompres kode CSS yang ada pada template blog sobat. Mungkin sobat pernah bertanya-tanya dalam hati, sebenarnya apa sih yang membuat loading blog cukup berat sehingga untuk membuka halaman blog itu sendiri cukup memakan waktu yang cukup lama? Perlu sobat ketahui, loading blog yang cukup berat di sebabkan oleh terlalu banyaknya widget yang terpasang di halaman blog, namun selain itu, loading itu sendiri juga bisa di pengaruhi oleh terlalu banyaknya penggunaan kode CSS yang ada di dalam template blog kita. Maka dari itu, memerlukan tools CSS compressor.

Cara kerja dari tools ini dapat di katakan sebagai alat pengompres/ penyingkat kode-kode CSS yang ada di dalam template blog sobat. Semisal hal yang paling sepele saja adalah kode warna, kode warna hitam yang biasa kita gunakan dengan #000000 dapat di singkat menjadi #000 dengan menggunakan tools ini. Begitu juga kode-kode CSS yang lainnya. Cukup apik kan? Nah, bagi anda yang tertarik untuk memasang tools CSS compressor di blog sobat, silahkan ikuti langkah-langkah di bawah ini.

Cara Memasang CSS Compressor di Blog

1. Pertama, silahkan sobat masuk pada halaman blogger sobat.
2. Kemudian silahkan masuk pada menu laman dan silahkan buat laman baru, setelah halaman laman statis terbuka, silahkan anda masukkan kode di bawah ini pada mode HTML.

<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>

3. Langkah terakhir silahkan publikasikan laman yang telah anda buat dan lihat hasilnya.

Untuk cara penggunaannya cukuplah mudah sob, sobat hanya perlu mengambil kode-kode CSS yang terdapat di dalam halaman template sobat, silahkan pilih bagian mana saja yang sekiranya di anggap perlu untuk di di perkecil. Selanjutnya silahkan masukkan kode-kode tersebut kedalaman tools di atas, selanjutnya silahkan beri tanda centang pada bagian bawah tools sesuai dengan keperluan, dan selanjutnya silahkan tekan tombol compress CSS. Setelah kode-kode CSS tersebut berhasil di kompres silahkan sobat ambil dan silahkan masukkan kembali ke halaman template blog sobat.

Baca juga : Cara memasang tools kode warna HTML

Itulah tadi cara memasang CSS compressor pada halaman statis pada blog anda serta cara penggunaannya. Bagi sobat yang memiliki pertanyaan seputar cara di atas, silahkan tinggalkan pertanyaan pada kotak komentar. Semoga bermanfaat :)