Công Cụ Nén CSS Cho Blogspot / Website

Share:
Công Cụ Nén CSS Cho Blogspot / Website

Công Cụ Nén CSS Cho Blogspot / Website

Fantasy đã đăng Friday, 22 May 2020
Hiện có lượt xem và 0 bình luận

  • Xem toàn trang
  • Nội Dung

    Bài Viết Liên quan

    Tác giả

    Đây là Công Cụ SEO giúp bạn tối ưu Blogger bằng cách nén file CSS để tăng tốc độ duyệt web chỉ với 1 thao tác đơn giản bạn đã có thể nén file css nhanh chóng. Công Cụ Nén CSS Cho Blogspot

    DEMO

    Để tạo trang nén css bạn hãy làm theo hướng dẫn sau:

    Vào Blogger Dashboard > Pages > Create New Page. Chuyển qua chế độ viết HTML và dán vào đoạn code sau:

    <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:#f054e4;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:#f054e4}
    #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>


    Ghi Chú

    -Strip all comments                        :  Bỏ Các Ghi Chú                       
    -Super compact                               : Siêu Nén                   
    -Keep indentation                           : Giữ phần thụt đầu dòng
    -Remove the last semicolon            : Bỏ phần xuống dòng

    -Compress CSS                                 : Nén CSS
    -Clear Field                                       : Xóa Tất Cả
    -Select All                                         : Chọn Tất Cả

    Các bạn có thể thay thế để việt hóa cho dễ nhìn


    Đây là công cụ tối ưu dung lượng các tập tin CSS với Minify CSS để giúp Blogger chạy nhanh hơn. Đây là cách tốt nhất để nâng cao trải nghiệm người dùng khi website của bạn chạy nhanh hơn và mạnh mẽ hơn. Bạn có thể chia sẻ với bạn bè của mình mẹo nhỏ này để tăng hiệu quả SEO cho Blogspot. Công cụ nén css này rất tuyệt vời phải không bạn, hãy thường xuyên sử dụng nó khi bạn tạo một Blogger Mới.
    Chúc Bạn Thành Công!
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    No comments:

    FSHARED