HTML làm đẹp và nén CSS dành cho Blogspot/Blogger

CSS là một phần không thể thiếu của website. Css giúp cho website bạn dễ nhìn hơn nếu trang trí hợp lí, giao diện đẹp hơn,... thôi để bài sau mình sẽ giới thiệu về CSS là gì. Còn giờ mình sẽ giới thiệu một công cụ nén  và làm đẹp CSS cho blog giúp load nhanh hơn.

Xem DEMO tại đây

Chúng ta bước đầu thực hiện nhé: ^^

Bước 1: Đăng nhập vào Blogger
Bước 2: Chuyển sang tag Trang
Bước 3: Thêm trang mới và chuyển qua HTML
Bước 4: Copy toàn bộ code dưới 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 cuối cùng là lưu lại trang vào vào blog bạn xem kết quả. Đừng quên like, share và ghé thăm trang thường xem nhé ! ^^ Chúc các bạn thành công.