Cara Menciptakan Form Css Manifier Di Halaman Statis Blogger Terbaru

Baca Juga

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

Pada form CSS Manifier ini yaitu versi terbaru dari saya sendiri, dimana saya mendesain biar responsive. Sedikit perhiasan juga saya telah mengubah checkbox yang pada umunya nya hanya mengceklis pada bab kotak saja, sekarang 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 bab "Copy To Clipboard", Tombol ini hanya berfungsi dikala anda sedang terhubung ke internet, alasannya yaitu pada tombol ini saya hanya memakai isyarat Java Script sederhana. Ok, eksklusif 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 isyarat berikut ini, dan letakkan pada bab 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, jikalau 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.