Cara Membuat Tools CSS Minifier Pada Blogger

Cara Membuat Tools CSS Minifier Pada Blogger
Cara Membuat Tools CSS Minifier Pada Blogger
GoSEO.id - Pada kesempatan kali ini GoSEO akan membagikan tips atau tutorial "Cara Membuat Tools CSS Minifier Pada Blogger". Tools ini berfungsi sebagai kompresor untuk kode CSS. Dengan mengkompres kode CSS otomatis kecepatan blog kita akan bertambah dan itu baik untuk SEO blog kita.

Baik, langsung saja Cara Membuat Tools CSS Minifier Pada Blogger :

Cara Membuat Tools CSS Minifier Pada Blogger

  1. Masuk pada akun blogger.com kamu.
  2. Setelah itu buat postingan pada halaman statis.
  3. Kemudian copy kode dibawah ini dan letakkan pada tab HTML.
    <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:100%;height:240px;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:0;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>
    <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>
  4. Selanjutnya silahkan tekan tombol Save dan Selesai.
Untuk tampilan silahkan kamu sesuaikan pada CSS diatas sesuai dengan keinginan.
Semoga tutorial Cara Membuat Tools CSS Minifier Pada Blogger ini bermanfaat. Jika ada yang tidak kamu mengerti silahkan tinggalkan komentar. Terima kasih.

Apakah kamu sudah membaca :
Pentingnya Penggunaan Email Profesional Dalam Bisnis
Cara Daftar Google News Untuk Blogger
Memasang Widget Recent Post Blogger
Embed Video Blogger Agar Responsive
Meningkatkan Kecepatan Blog Dengan Cloudflare
Perbedaan Visitor dan Unique Visitor Google Analytics
Menghilangkan URL ?m=1 Blogger
Membuat Press Release yang Baik dan Disukai Media
Membuat URL Sumber Otomatis Blogger
Membuat URL Shortener Dengan Javascript
Cara Menghapus Spam Backlinks
Mempercepat Loading Iklan Adsense Terbaru
Media Sosial Sebagai Peningkat Traffic Bisnis
Tutorial SEO Langkah Demi Langkah Untuk Pemula
Cara Membuat Strategi Konten
Rekomendasi SEO untuk YouTube
Bagaimana Menghindari Kesalahan Informasi SEO
Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap
10 Cara Menghasilkan Dari Blog Tanpa Google Adsense

0 Comments

Posting Komentar