Hướng Dẫn Cách Tạo Trang Nén CSS Cho Blogspot Của Bạn

Hướng Dẫn Cách Tạo Trang Nén CSS Cho Blogspot Của Bạn

Hiện nay các công cụ tool đang trở nên phổ biến trong các Blog .Nó giúp người dùng biết đến Blog của bạn nhiều hơn , từ đó tăng tương tác giữa người dùng và Blog một cách rõ nét .Vì Vậy , Hôm nay mình sẽ hướng dẫn các bạn cách để tạo trang nén CSS cho Blog .



CÁCH TẠO TRANG NÉN CSS CHO BLOG .

Rất đơn giản , các bạn chỉ cần làm 3 bước sau :

Bước 1 : Chọn Tạo Trang Mới -> Chọn chế độ chỉnh sửa HTML .

Bước 2 : Dán đoạn code sau vào :

<article> 
    <div id="cssminifier"> 
    <style scoped="" type="text/css"> #sidebar-wrapper{display:none} #cssminifier{background:#00DAB3;position:relative;display:block;clear:both;border-radius:2px;padding:5px} #cssminifier textarea{width:95%;height:300px;margin:0 auto;display:block;background-color:#fff;padding:5px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:2px 2px 0 0;resize:none} textarea:focus{background-color:#FFF;color:#303030} #cssminifier .box{margin:10px auto 10px;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:#333;text-align:center;padding:5px 5px 5px 5px;margin:0;border-radius:0 0 2px 2px} #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:#f1f1f1;color:#333} #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="Dán CSS của bạn vào đây. Sau đó nhấn chọn các chức năng. Nấn Nén css để hoàn tất... Chúc bạn thành công !" spellcheck="false">
    </textarea> <br /> 
    <div class="button-group"> 
    <div class="box"> 
    <input class="opt1" id="stripAllComment" type="checkbox" /> <label for="stripAllComment">Bỏ các ghi chú</label> <input class="opt2" id="superCompact" type="checkbox" />
    <label for="superCompact">Siêu nén</label> 
    <input class="opt3" id="betterIndentation" type="checkbox" />
    <label for="betterIndentation">Giữ phần thụt đầu dòng</label> <input checked="" class="opt4" id="keepLastComma" type="checkbox" />
    <label for="keepLastComma">Xóa bỏ phần xuống dòng
    </label>
    </div> 
    <button onclick="compressCSS(&quot;cssField&quot;);">Nén css
    </button> <button onclick="clearField(&quot;cssField&quot;);">Xóa tất cả</button> <button onclick="selectAll(&quot;cssField&quot;);">Chọn tất cả</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> </article>

Bước 3 : Xuất bản trang và xem kết quả .

Chúc các bạn thành công !