Tạo Trang Nén CSS Dành Cho Blogspot

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: hungdev.qb@gmail.com
• Facebook: www.fb.com/100007780446455

Điểm 4.6/5 dựa vào 87 đánh giá
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.




  • 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.

Source Code: Thủ Thuật Windows

42 nhận xét:


Cùng tham gia bình luận bài viết này nhé!

  1. comment thứ 3, chúc người anh em buổi tối vui vẻ (3)

    Trả lờiXóa
  2. Anh biết thẻ để chèn code vào đầu bài viết là thẻ gì ko anh #Hưng :(

    Trả lờiXóa
  3. Hình như bài này của bên Thủy huyện Điện hay sao í bác: http://www.thuthuatwindows.com/2016/08/html-lam-dep-va-nen-css-danh-cho-blogspot-blogger.html

    Trả lờiXóa
  4. Nhược điểm của nén css này là mỗi khi muốn edit phải cop ra notepad++ , chứ edit thẳng trên temp dễ bị lỗi

    Trả lờiXóa
  5. Lưu ý cho ae là cái này phải backup lại temp cũ vì khi nén rồi thì k chỉnh sửa trực tiếp css trên temp đã nén css đâu nha.

    Trả lờiXóa
  6. Demo trang nén css đẹp đấy ;) đặt gạch ít bữa sang xin ;)))

    Trả lờiXóa
  7. hú ye, sr bác nha mấy nay không tt được vì blog tui LK nhiều quá nên tt cũng hơi khó khăn.

    Trả lờiXóa
  8. chỉ cần cop css rồi pass lên thanh tìm kiếm rồi pass vô lại là đc khỏi nén kkk

    Trả lờiXóa

0846.202.472
Nhắn tin qua Facebook Skype: Dang Hung Đặng Hưng