Cara Membuat Form CSS Minfier Pada Blog..

Hallo,sobat IDTemplate,Pada postingan kali ini saya akan menjelaskan tentang cara membuat Form CSS Minifier Pada Blog.,Sebenarnya apa sih CSS Minifier itu dan kegunaanya ??



Source :http://maycyber-download.blogspot.com/2018/06/cara-membuat-form-css-manifier.html/

CSS Minifier - Adalah sebuah Alat untuk mengkompress CSS Agar Lebih ramping atau lebih Rapih,Alat ini Juga menguntungkan Blog anda Karena dengan Di kompres maka Akan lebih Mempercepat loading Blog,

Keunggulan alat ini Terdiri di 4.Tombol dengan Fungsi Yang berbeda Beda Pula,Misal 
1.Compress CSS => Berfungsi Untuk Mengkompress CSS
2. Clear Field => Berfungsi Untuk Membersihkan Lembar Kerja
3.Copy To Clip Board => Berfungsi Untuk Mengkopy CSS Yang Telah Terkompress
4. Select All => Berfungsi Untuk Menseleksi Seluruh Code.

Dan Istimewanya Lagi Copy To Clipboard Hanya Terhubung Ketika konek dengan Internet.

Oke Lansung aja Kita Praktek

1.Buka Blogger Kalian Masing-masing
2.Pilih Dasboard Atau Halaman
3.Buat Halaman Baru

Proses :

Klik Kode Di Bawah dan Taruh di Laman Baru (Mode HTML Bukan Compose)

<style type="text/css">
.ribbon{position:relative;z-index:1;padding:1em 2em}
.ribbon-tampilan{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#2980b9;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.ribbon-tampilan:before,.ribbon-tampilan:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #2980b9;z-index:-1}
.ribbon-tampilan:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.ribbon-tampilan:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after{content:"";position:absolute;display:block;border-style:solid;border-color:#2980b9 transparent transparent transparent;bottom:-1em}
.ribbon-tampilan .ribbon-nama:before{left:0;border-width:1em 0 0 1em}
.ribbon-tampilan .ribbon-nama:after{right:0;border-width:1em 1em 0 0}
#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}
h2.post-title a,h1.post-title a,h2.post-title,h1.post-title{display:none;margin-top:0;margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important}
.breadcrumbs{display:none;margin-top:0;margin:0}
#comments,#breadcrumb,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0}
.post-inner{padding:0 0 0 0;margin:20px auto}
.post-body ul#wrapin{display:block;position:relative;margin:30px auto 0 auto}
.post-body ul#wrapin li{display:block;margin:0 auto;text-align:left}
.post-body ul#wrapin br{display:none}
#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:15px auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:2px solid #2980b9;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:4px;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px 30 50px;color:#fff}
#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:5px}
#cssminifier button,#cssminifier button[disabled]:active{color:#fff!important;height:50px;font-size:14px;font-weight:bold;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;margin-top:15px}
#cssminifier button:hover,#cssminifier button:active{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{color:#fff!important;font-size:14px;font-weight:bold;padding:15px 25px;border-radius:4px;border:none;outline:none;cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;margin:10px 5px 15px}
#cssminifier br{display:none}
#belakang{background:#0569ab;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
*{margin:0 auto}
body{background:#fafafa;font-size:16px;font-family:'Lucida Sans',sans-serif}
form{padding:20px}
form label{display:inline-block;position:relative;cursor:pointer;line-height:50px;vertical-align:top;font-weight:bold}
form .form-check{display:inline-block;position:relative;width:50px;height:25px}
form .form-check::before{content:"";display:inline-block;position:relative;width:50px;height:25px;background:#fff;border:1px solid #ddd;border-radius:10px;-moz-border-radius:30px}
form .form-radio{display:none}
form .form-radio + label{padding-left:35px}
form .form-radio + label::before{content:"";position:absolute;left:0;display:inline-block;width:25px;height:25px;background:#fff;margin-right:5px;border:1px solid #ddd;border-radius:50%;-moz-border-radius:50%;box-shadow:2px 2px 2px #bbb;-moz-box-shadow:2px 2px 2px #bbb;transition:0.3s;-moz-transition:0.3s;-webkit-transition:0.3s;-khtml-transition:0.3s}
form .form-radio:checked + label::before{background:#34A8BF;border:5px solid #fff;width:17px;height:17px}
form .form-check::after{content:"";display:inline-block;position:absolute;width:21px;height:21px;border-radius:25px;-moz-border-radius:25px;background:#bfbfbf;left:3px;top:3px;transition:0.3s;-moz-transition:0.3s;-webkit-transition:0.3s;-khtml-transition:0.3s}
form .form-check:checked::after{left:27px;background:#1bc94d}
fieldset{display:block;-webkit-margin-start:2px;-webkit-margin-end:2px;-webkit-padding-before:0.35em;-webkit-padding-start:0.75em;-webkit-padding-end:0.75em;-webkit-padding-after:0.625em;min-width:-webkit-min-content;border:2px solid #07ACEC;border-radius:4px;}
legend{display:block;margin: 5px;font-weight: bold; -webkit-padding-start:2px;-webkit-padding-end:2px;border-width:initial;border-style:none;border-color:initial;border-image:initial}

    </style>
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">CSS Manifier (Compressed)
</h1>
</div>
<div id="cssminifier">
<span class="clear">
<textarea autofocus="" "cols="30" "rows="20" id="cssField" onfocus="code_check();" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<br />
<div class="button-group">
<div class="box">
<div id="belakang">
<form action="">
<fieldset>
<legend>SELECTED</legend>
<input checked="true" type="checkbox" id="stripAllComment" class="opt1 form-check">
<label for="stripAllComment">STRIPT ALL COMMAND</label>
<br>
<input type="checkbox" name="check" id="superCompact"class="opt2 form-check">
<label for="superCompact">SUPER </label>
<br>
<input checked="true" type="checkbox" name="check" id="betterIndentation" class="opt3 form-check">
<label for="txt3">KEEP IDENTATION</label>
    
<input checked="true" type="checkbox" name="check" id="keepLastComma" class="opt4 form-check">
 <label for="keepLastComma">REMOVE LAST SEMICOLON
    </fieldset>
    </form>

    </div>
</div>
    <div id="belakang">
<button onclick="selectAll("cssField");">Select All
<button onfocus="cssField" onclick="compressCSS("cssField");">Compress CSS
<button onclick="clearField("cssField");" type="reset">Clear Field 
<button onclick="copyToClipboard();">COPY TO CLIPBOARD
</div>
<div class="clear">
</div>
<script type="text/javascript">
function code_check(){
var focuscheck=document.getElementById('cssField');if(focuscheck.value.indexOf('Pastekan Disini Kode yang Akan Anda Pasang pada Postingan Blog')>0)focuscheck.value='';}
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,"'$1'").replace(/\"(.*?)\"/g,"\"$1\"").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1$2:$3$4").replace(/\{/g,"{")}),a=a.replace(/<(.*?)('|")(.*?)('|")>/g,function(e){return e.replace(/'(.*?)'/g,"'$1'").replace(/"(.*?)"/g,"\"$1\"")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"$1").replace(/\!important/gi,"!important")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"/*$1*/"),e.innerHTML=""+a+"",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,">"),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];
function copyToClipboard() {
  $("#cssField").select();
  document.execCommand("copy"); 
}
</script>
</div>
    </div>

5.Terakhir Simpan 

Sekian Postingan Kali Ini,Jika masih ada Yang Belum Mengerti Bisa Tanya Saya Lewat Kolom Komentar Terimakasih.

Thanks To :
Bang Hilmi Ammar (MayCyber)