Membuat Minifier CSS di Blogger
Posted by 
Penjelasan dari CSS Minifier dan Manfaafnya.
CSS Minifier adalah tool untuk mengompress file CSS agar menjadi simpel sehingga lebih cepat diakses oleh browser, atau dalam kata lain css minifier berguna untuk mempercepat loading website/blog dan itu sangat baik untuk mendukung SEO Blog .
Secara sederhana, proses minify dapat menghapus spasi karakter yang tidak lagi diperlukan, Contohnya seperti baris baru, komentar, dan pembatas pada kode Anda. Karakter tersebut digunakan agar dapat memberikan kemudahan membaca dan tujuan visual, tapi tidak diperlukan lagi jika untuk mengeksekusi code.
Hasil akhirnya pada proses minify dapat meningkatkan kecepatan download, parsing serta execution time.
Manfaat CSS Minifier:
1. Ukuran File Jadi Kecil
File CSS & JavaScript yang di-minify ini dapat berukuran lebih kecil. Hampir semua spasi, komentar dan dokumentasi bisa dibuang ketika melakukan proses “minification“. Jadi file lebih compact. Dengan minification ukuran Javascript yang diperoleh dapat meraih sekitar 48% lebih kecil dan CSS bisa memperoleh ukuran sekitar 60% dari ukuran asli.
2. Website jadi lebih cepat diakses
Karena ukuran file berubah menjadi kecil, maka loading website pun dapat bekerja menjadi lebih cepat. Hal ini merupakan proses salah satu teknik Front End Optimization (FEO). Jadi, dampak yang didapat dari ukuran website secara keseluruhan juga dapat lebih kecil dan ringan.
Cara Memasang Tool CSS Minifier di Halaman Statis
Blogger
1. Buka Blogger > Buat postingan baru di halaman statis > Kemudian tambahkan kode di bawah ini di tab HTML (Bukan Compose).
<style scoped="" type="text/css">
#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{display:none;margin-top:0;margin:0}
#main-wrapper{padding:0;width:100%;border:0}
#cssminifier{position:relative;display:block;clear:both;border-radius:8px;border:1px solid rgba(0,0,0,0.05);transition:all .6s}
#cssminifier:hover{border-color:rgba(0,0,0,0.1)}
#cssminifier textarea{width:100%;outline:none;height:240px;margin:0 auto;display:block;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:8px 8px 0 0;resize:none}
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:#ff4169;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-size:130%;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 8px 8px}
#cssminifier button,#cssminifier button[disabled]:active{outline:none;background:rgba(255,255,255,.25);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:0 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}
#cssminifier button:hover,#cssminifier button:active{background:rgba(255,255,255,.5);color:#fff}
#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;padding:0;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:'\f00c';font-family:fontawesome;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%}
.Night #cssminifier textarea{background:#33475c;color:#fff}
.Night #cssminifier textarea::placeholder{color:#fff}
.Night #cssminifier .button-group{background:#1c2733;color:rgba(255,255,255,.7)}
.Night #cssminifier button,.Night #cssminifier button[disabled]:active{background:#33475c;color:#fff}
.Night #cssminifier button:hover,.Night #cssminifier button:active{background:#415a74;color:#fff}
</style><br />
<div id="cssminifier">
<span class="clear"></span><br />
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea><br />
<div class="button-group"><div class="box"><input class="option-input checkbox opt1" id="stripAllComment" type="checkbox" /> <br />
<label for="stripAllComment">Strip all comments</label><br />
<input class="option-input checkbox opt2" id="superCompact" type="checkbox" /> <br />
<label for="superCompact">Super compact</label><br />
<input class="option-input checkbox opt3" id="betterIndentation" type="checkbox" /> <br />
<label for="betterIndentation">Keep indentation</label><br />
<input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox" /> <br />
<label for="keepLastComma">Remove the last semicolon</label><br />
</div>
<button onclick="compressCSS("cssField");">Compress CSS</button><br />
<button onclick="clearField("cssField");">Clear Field</button> <br />
<button onclick="selectAll("cssField");">Select All</button><br />
<button type="button" onclick="copy_text()">Copy</button><br/>
</div><div class="clear"></div>
<div>By <a class='setid' href='https://fajardjoekerz.blogspot.com/' id='setid' title='Fajardjoekerz'>Fajardjoekerz</a></div>
<script src='https://cdn.jsdelivr.net/gh/Fajardjoekerz/djoekerz@1c9a21cdc24d06a0f28d4cb9d54cfad057be9519/Minifier.js' type='text/javascript'/>
Sesuaikan kembali tampilan lewat kode CSS di atas sesuai keinginan
2. Publish postingan dan lihat hasilnya.
