Cara Memasang Tool CSS Minifier di Halaman Statis Blogger

Cara Membuat Tool CSS Minify di Halaman Statis Blogger
Salah satu faktor yang mempengaruhi SEO ialah kecepatan situs saat di akses oleh pengunjung, semakin cepat proses loading blog Anda maka semakin bagus di mata search engine. Sebenarnya ada banyak sekali variable yang bisa mempengaruhi kecepatan suatu situs atau blog saat di akses seperti ukuran gambar, ukuran video, ukuran file (CSS, HTML, dan Javascript), jumlah iklan, kecepatan internet, dan masih banyak lainnya. Lalu apa fungsi CSS Minify dan hubungannya? Tool CSS minifier berfungsi untuk mengompress ukuran CSS menjadi lebih rapat dan padat sehingga dengan begitu ukuran file akan lebih rapi serta proses akses situs akan jauh lebih cepat dari pada sebelumnya. Lebih jelasnya CSS Beautifier ini akan menghapus whitespace yang tidak berguna dan menghilangkan comments tidak penting sehingga dengan begitu jumlah byte akan kecil. Nah artikel kali ini akan memberikan tutorial cara membuat tool CSS Minifier di Blog, nanti nya tool ini bisa Anda gunakan untuk mengecilkan berbagai CSS langsung di blog Anda. Cara mengubahnya pun sangat mudah dan simple, Anda tinggal memasukan kode CSS di kolom yang tersedia dan klik Compress maka dengan begitu kode CSS akan secara otomatis lebih rapi.

Cara Membuat Tool CSS Minify di Halaman Statis Blogger
1. Pertama silahkan Anda kunjungi dulu akun Blogger Anda
2. Lalu silahkan Anda pergi ke Halaman → Membuat Halaman Baru → Kemudian silahkan Anda tambahkan kode berikut ini di Tab HTML pada Laman.

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:10px;border:1px solid rgba(0,0,0,0.05)}
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:10px;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:#e03134;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssminifier button{
display: inline-block;
width: 20%;
height: 50px;
margin-top: 1em;
margin-bottom: 6px;
cursor: pointer;
background: #c10937;
color: white;
font-family: Oswald ,sans-serif;
font-size: 1em;
border: none;
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,2px 2px 0 0 #1f7a82,3px 3px 0 0 #1f7a82;
-webkit-appearance: none;
  -webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
#cssminifier button:hover{
-webkit-box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
box-shadow: 1px 1px 0 0 #1f7a82,0px 0px 0 0 #1f7a82,0px 0px 0 0 #1f7a82;
margin-top: 22px;
margin-left: 2px;
margin-bottom: 0px;
}
#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;height:18px;width:18px;content:'\f00c';font-family:fontawesome;}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." 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>
Disini Anda bisa mengatur ukuran CSS Minifier sesuai keinginan dengan mengedit sedikit Width.
3. Lalu Publikasikan dan lihat hasilnya, bagaimana bagus bukan?

Nah itulah langkah singkat membuat CSS minifier keren di Blog, jadi gunakan tool tersebut secara maksimal agar blog Anda memiliki kecepatan baik saat di kunjungi. Nah sekian dulu dari artikel kali ini, jika ada yang ingin Anda tanyakan atau tidak paham silahkan komentar dibawah ini terima kasih.

COMMENTS

Nama

AoV,4,BitCoin,5,Blogspot,55,Games,14,internet,35,komputer,59,Kontes Blog,1,lain-lain,130,linux,1,multimedia,1,Overwatch,3,Plugin,1,sejarah,13,Smartphone,35,Tips & Trik,22,tkj,55,Widget,33,windows,4,Wordpress,15,
ltr
item
Layar Komputer 21: Cara Memasang Tool CSS Minifier di Halaman Statis Blogger
Cara Memasang Tool CSS Minifier di Halaman Statis Blogger
https://4.bp.blogspot.com/-NwJMHLFiHIQ/WupLA9JLDeI/AAAAAAAACHg/2yEKq0hoIRUTajxmhi6Gt5zny4CiQLM4wCLcBGAs/s1600/ezgif.com-optimize%2B%25282%2529.gif
https://4.bp.blogspot.com/-NwJMHLFiHIQ/WupLA9JLDeI/AAAAAAAACHg/2yEKq0hoIRUTajxmhi6Gt5zny4CiQLM4wCLcBGAs/s72-c/ezgif.com-optimize%2B%25282%2529.gif
Layar Komputer 21
https://www.lk21.news/2018/05/cara-memasang-tool-css-minifier-di.html
https://www.lk21.news/
https://www.lk21.news/
https://www.lk21.news/2018/05/cara-memasang-tool-css-minifier-di.html
true
2757422719814358249
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All Artikel Terkait LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy