CSS Compressor là một cung cụ web để rút gọn hay là nén css để tăng tốc blogspot của bạn bằng cách sao chép đoạn css và nén nó lại. Để có được công cụ nén css bạn phải sao chép đoạn mã dưới rồi chép vào trang tĩnh của mình
[ Demo ]
Mẫu code nén css này là mẫu mới nhất hiện nay trên các blogger với thiết kế chuẩn nhất, Trong CSS Compressor có 4 nút cụ thể là CSS Compress, Clear Field, Chọn All và Copy To Clipboard.
Hướng dẫn thêm CSS Compressor vào blogspot
- Bước 1 : Vào Blogger
- Bước 2 : Chuyển Tới Trang => Qua HTML và nhập mã sau vào
<style type="text/css">
.ribbon{position:relative;z-index:1;padding:1em 2em}
.ribbon-tampilan{font-size:120%!important;text-transform:uppercase;width:60%;position:relative;background:#2980b9;color:#fff;text-align:center;padding:1em 2em;margin:2em auto 3em}
.ribbon-tampilan:before,.ribbon-tampilan:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #2980b9;z-index:-1}
.ribbon-tampilan:before{left:-2em;border-right-width:1.5em;border-left-color:transparent}
.ribbon-tampilan:after{right:-2em;border-left-width:1.5em;border-right-color:transparent}
.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after{content:"";position:absolute;display:block;border-style:solid;border-color:#2980b9 transparent transparent transparent;bottom:-1em}
.ribbon-tampilan .ribbon-nama:before{left:0;border-width:1em 0 0 1em}
.ribbon-tampilan .ribbon-nama:after{right:0;border-width:1em 1em 0 0}
#outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important}
#post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important}
.post-body,.post{background-position:center!important}
h2.post-title a,h1.post-title a,h2.post-title,h1.post-title{display:none;margin-top:0;margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important}
.breadcrumbs{display:none;margin-top:0;margin:0}
#comments,#breadcrumb,#sidebar-wrapper,#menu-wrap{display:none;margin-top:0;margin:0}
.post-inner{padding:0 0 0 0;margin:20px auto}
.post-body ul#wrapin{display:block;position:relative;margin:30px auto 0 auto}
.post-body ul#wrapin li{display:block;margin:0 auto;text-align:left}
.post-body ul#wrapin br{display:none}
#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:94%;height:300px;margin:15px auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:2px solid #2980b9;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:4px;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px 30 50px;color:#fff}
#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:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:5px}
#cssminifier button,#cssminifier button[disabled]:active{color:#fff!important;height:50px;font-size:14px;font-weight:bold;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;margin-top:15px}
#cssminifier button:hover,#cssminifier button:active{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{color:#fff!important;font-size:14px;font-weight:bold;padding:15px 25px;border-radius:4px;border:none;outline:none;cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;margin:10px 5px 15px}
#cssminifier br{display:none}
#belakang{background:#0569ab;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
*{margin:0 auto}
body{background:#fafafa;font-size:16px;font-family:'Lucida Sans',sans-serif}
form{padding:20px}
form label{display:inline-block;position:relative;cursor:pointer;line-height:50px;vertical-align:top;font-weight:bold}
form .form-check{display:inline-block;position:relative;width:50px;height:25px}
form .form-check::before{content:"";display:inline-block;position:relative;width:50px;height:25px;background:#fff;border:1px solid #ddd;border-radius:10px;-moz-border-radius:30px}
form .form-radio{display:none}
form .form-radio + label{padding-left:35px}
form .form-radio + label::before{content:"";position:absolute;left:0;display:inline-block;width:25px;height:25px;background:#fff;margin-right:5px;border:1px solid #ddd;border-radius:50%;-moz-border-radius:50%;box-shadow:2px 2px 2px #bbb;-moz-box-shadow:2px 2px 2px #bbb;transition:0.3s;-moz-transition:0.3s;-webkit-transition:0.3s;-khtml-transition:0.3s}
form .form-radio:checked + label::before{background:#34A8BF;border:5px solid #fff;width:17px;height:17px}
form .form-check::after{content:"";display:inline-block;position:absolute;width:21px;height:21px;border-radius:25px;-moz-border-radius:25px;background:#bfbfbf;left:3px;top:3px;transition:0.3s;-moz-transition:0.3s;-webkit-transition:0.3s;-khtml-transition:0.3s}
form .form-check:checked::after{left:27px;background:#1bc94d}
fieldset{display:block;-webkit-margin-start:2px;-webkit-margin-end:2px;-webkit-padding-before:0.35em;-webkit-padding-start:0.75em;-webkit-padding-end:0.75em;-webkit-padding-after:0.625em;min-width:-webkit-min-content;border:2px solid #07ACEC;border-radius:4px;}
legend{display:block;margin: 5px;font-weight: bold; -webkit-padding-start:2px;-webkit-padding-end:2px;border-width:initial;border-style:none;border-color:initial;border-image:initial}
</style>
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">CSS (Compressed) By ZaloSec.Com</strong>
</h1>
</div>
<div id="cssminifier">
<span class="clear"></span>
<textarea autofocus="" "cols="30" "rows="20" id="cssField" onfocus="code_check();" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<br />
<div class="button-group">
<div class="box">
<div id="belakang">
<form action="">
<fieldset>
<legend>SELECTED</legend>
<input checked="true" type="checkbox" id="stripAllComment" class="opt1 form-check">
<label for="stripAllComment">STRIPT ALL COMMAND</label>
<br>
<input type="checkbox" name="check" id="superCompact"class="opt2 form-check">
<label for="superCompact">SUPER COMPACT</label>
<br>
<input checked="true" type="checkbox" name="check" id="betterIndentation" class="opt3 form-check">
<label for="txt3">KEEP IDENTATION</label>
<input checked="true" type="checkbox" name="check" id="keepLastComma" class="opt4 form-check">
<label for="keepLastComma">REMOVE LAST SEMICOLON</label>
</fieldset>
</form>
</div>
</div>
<div id="belakang">
<button onclick="selectAll("cssField");">Select All</button>
<button onfocus="cssField" onclick="compressCSS("cssField");">Compress CSS</button>
<button onclick="clearField("cssField");" type="reset">Clear Field</button>
<button onclick="copyToClipboard();">COPY TO CLIPBOARD</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function code_check(){
var focuscheck=document.getElementById('cssField');if(focuscheck.value.indexOf('Pastekan Disini Kode yang Akan Anda Pasang pada Postingan Blog')>0)focuscheck.value='';}
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(/<(.*?)('|")(.*?)('|")>/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,"<").replace(/>/g,">"),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];
function copyToClipboard() {
$("#cssField").select();
document.execCommand("copy");
}
</script>
</div>
</div>Nếu bạn gặp lỗi hay cần trợ giúp gì thì hãy bình luận ở dưới nhé, hy vọng bài viết này hữu ích đối với bạn
Tag : Share Code Rút Gọn Css (CSS Compressor ) Cho Blogspot , Share code nén css, CSS Compressor for Blogspot, thêm CSS Compressor vào blogspot
