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

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

12:03
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
LABEL : #

Related Post

42 Nhận xét

avatar
Thứ Sáu, tháng 12 08, 2017 6:49:00 CH

Còm men đầu
TTT
Buổi tối vui vẻ

avatar
Thứ Sáu, tháng 12 08, 2017 7:37:00 CH

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

avatar
Thứ Sáu, tháng 12 08, 2017 7:47:00 CH

Anh biết thẻ để chèn code vào đầu bài viết là thẻ gì ko anh #Hưng :(

avatar
Thứ Sáu, tháng 12 08, 2017 7:48:00 CH

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

avatar
Thứ Sáu, tháng 12 08, 2017 7:55:00 CH

Anh biết thẻ để chèn code vào đầu bài viết là thẻ gì ko anh #Hải

avatar
Thứ Sáu, tháng 12 08, 2017 8:13:00 CH

em tìm đi cái đó có 3 hay 4 code gì trùng nhau mà

avatar
Thứ Sáu, tháng 12 08, 2017 9:48:00 CH

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

avatar
Thứ Bảy, tháng 12 09, 2017 11:01:00 SA

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.

avatar
Thứ Bảy, tháng 12 09, 2017 11:40:00 SA

Tôi tìm cái này bữa h mà không có hướng dẫn làm cái trang nén css online đó

avatar
Thứ Bảy, tháng 12 30, 2017 5:59:00 CH

Demo trang nén css đẹp đấy ;) đặt gạch ít bữa sang xin ;)))

avatar
Chủ Nhật, tháng 1 07, 2018 7:18:00 CH

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.

avatar
Thứ Sáu, tháng 12 28, 2018 1:23:00 CH

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