Cara Membuat Form CSS Manifier di Halaman Statis Blogger Terbaru

CSS Minifier adalah merupakan salah satu website tools yang digunakan untuk kompres kode CSS, dengan mengkompres kode CSS yang ada di template anda, secara otomatis bisa mempercepat loading blog anda. Untuk mengkompres kode CSS anda harus lakukan adalah memasang Form CSS Manifier ini. Cara penggunaanya juga mudah, anda tinggal copy-paste kode CSS dan masukan kode Form CSS Manifier dan centang salah satu, maka akan muncul kode yang sudah di kompres. Setelah kode CSS sudah di kompres, anda tinggal meletakannya di ]]></b:skin> atau </style>

Pada form CSS Manifier ini adalah versi terbaru dari saya sendiri, dimana saya mendesain agar responsive. Sedikit tambahan juga saya telah mengubah checkbox yang pada umunya nya hanya mengceklis pada bagian kotak saja, kini saya mendesain checkbox menjadi mode on-off.

Screenshoot :

Terdapat 4 tombol yang saya berikan, yaitu tombol Compress CSS, Clear Field, Select All dan Copy To Clipboard. Kekurangan nya ada pada bagian "Copy To Clipboard", Tombol ini hanya berfungsi ketika anda sedang terhubung ke internet, karena pada tombol ini saya hanya menggunakan kode Java Script sederhana. Ok, langsung saja ke proses pembuatan.

Cara Membuat Form CSS Manifier di Halaman Statis Blogger Terbaru

Cara Pertama : 

1. Buka Blogger - Kemudian Login.
2. Dashboard - Halaman
3. Pilih Halaman.
4. Buat Halaman Baru.

Proses Pembuatan :

1. Buat Halaman Baru.
2. Copy & Paste kode berikut ini, dan letakkan pada bagian 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)</strong>
</h1>
</div>
<div id="cssminifier">
<span class="clear"></span>
<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 COMPACT</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</label>
    </fieldset>
    </form>

    </div>
</div>
    <div id="belakang">
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
<button onfocus="cssField" onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);" type="reset">Clear Field</button> 
<button onclick="copyToClipboard();">COPY TO CLIPBOARD</button>
</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,"<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];
function copyToClipboard() {
  $("#cssField").select();
  document.execCommand("copy"); 
}
</script>
</div>
    </div>

3. Simpan, Publikasikan.


Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Form CSS Manifier di Halaman Statis Blogger Terbaru.

Share this post

Related Post