CSS Minifier ialah merupakan salah satu Website Tools yang dipakai untuk Compress arahan CSS, Dengan meng-compressed arahan CSS yang ada di Template anda, secara otomatis dapat mempercepat loading blog anda. Untuk meng-compressed arahan CSS anda harus memasang Form CSS Manifier. Cara penggunaanya juga mudah, anda tinggal copy&paste arahan CSS dan masukan arahan Form CSS Manifier dan Centang salah satu, maka akan muncul arahan yang sudah di Compressed. Setelah arahan CSS sudah di Compressed, anda tinggal meletakannya di ]]></b:skin> atau </style> . Bila anda ingin memasang nya, ikuti langkah-langkah berikut ini.
Baca Juga :
Baca Juga :
Screenshoot :
Cara Memasang Form CSS Manifier di Halaman Statis Blogger
Cara Pertama :
1. Buka Blogger- Kemudian login
2. Dashboard - Laman
3. Buat Laman Kosong
Proses Pembuatan :
1. Buka Laman Kosong
2. Pilih HTML jangan Compose, - kemudian.
3. Copy&paste arahan berikut ini, dan letakkan di Laman Kosong <HTML Don't COMPOSE>
<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:94%;height:300px;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:5px 100px;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> <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("cssField");">Compress CSS</button> <button onclick="clearField("cssField");">Clear Field</button> <button onclick="selectAll("cssField");">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(/<(.*?)('|")(.*?)('|")>/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,"<").replace(/>/g,">"),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> </div>5. Publikasikan
Demikianlah Tutorial Blogger kali ini, kalau ada yang ingin ditanyakan, silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat halaman statis tersebut. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Memasang Form CSS Manifier di Halaman Statis Blogger
