Blogger Tools - Memasang CSS Minifier di Blogger!

Fakfak, Papua, Indonesia - Halo sobat blogger, tahukah kamu apa fungsi dari Tools CSS Minifier dan bagaimana cara memasangnya di blog kalian, serta cara penggunaan dari tools ini sendiri. Berikut bakal admin ulas melalui tutorial singkat dibawah ini.

Tools CSS Minifier ini memiliki fungsi untuk mengecilkan file CSS. Sehingga file CSS yang dimuat oleh blog kalian akan semakin kecil yang otomatis akan meningkatkan kecepatan loading blog kalian. Karena kecepatan blog akan menentukan blog kalian SEO Friendly dan tidaknya.


Coba deh kalian pergi ke page speed tools guna mengecek kecepatan loading blog kalian. Barangkali ada notif saran untuk mengompres file CSS dalam template yang sekarang kalian gunain.

Ada beberapa situs-situs yang menyediakan layanan ini dan tentu saja gratis. Namun apakah kamu akan terus menerus berkunjung hanya untuk mengompres file CSS mu, ketika ada melakukan penambahan pada templatemu. Menurut mimin sih, mending install sendiri di blog kalian. Jadi ketika perlu, langsung klik aja, tanpa perlu browsing/searching di google lagi.

Jadi gimana? tertarik untuk mencoba memasang Tools CSS Minifier ini langsung di blog kalian, simak tutorial singkat dibawah ini:

[1]. Login ke blogger
[2]. Pergi ke Menu Halaman > Halaman Baru
[3]. Silahkan berikan Nama Halaman sesuai keinginan kalian
[4]. Selanjutnya salin dan paste kode dibawah ini dalam mode Tampilan HTML

<div id="cssminifier">
<style scoped="" type="text/css">
#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: 100%;
    height: 240px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New', Monospace;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    border-radius: 5px 5px 0 0;
    resize: none
}

textarea:focus {
    background-color: #FFF;
    color: #303030
}

#cssminifier .box {
    margin: 10px auto 30px;
    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: #2980b9;
    text-align: center;
    padding: 20px 20px 40px 20px;
    margin: 0;
    border-radius: 0 0 5px 5px;
    float: none;
}

#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: #fff;
    color: #2980b9
}

#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><br />
<span class="clear"></span><br />
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea><br />
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" /> <br />
<label for="stripAllComment">Strip all comments</label><br />
<input class="opt2" id="superCompact" type="checkbox" /> <br />
<label for="superCompact">Super compact</label><br />
<input class="opt3" id="betterIndentation" type="checkbox" /> <br />
<label for="betterIndentation">Keep indentation</label><br />
<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> <br />
<label for="keepLastComma">Remove the last semicolon</label></div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button><br />
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <br />
<button onclick="selectAll(&quot;cssField&quot;);">Select All</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, "'$1'").replace(/\"(.*?)\"/g, "\"$1\"").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g, "$1$2:$3$4").replace(/\{/g, "{")
  }),
  a = a.replace(/<(.*?)('|")(.*?)('|")>/g, function (e) {
   return e.replace(/'(.*?)'/g, "'$1'").replace(/"(.*?)"/g, "\"$1\"")
  }),
  a = a.replace(/\{([\s\S]+?)\}/g, function (e) {
   return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g, "$1").replace(/\!important/gi, "!important")
  }),
  a = a.replace(/\/\*([\w\W]+?)\*\//gm, "/*$1*/"),
  e.innerHTML = "" + a + "",
  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, ">"),
 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><br /></div>

[5]. Publikasikan
[6]. Selesai

NOTE: Salin dan Paste kode diatad hanya dalam mode Tampilan HTML, jangan pada Tampilan Menulis!!

Well, demikian pembahasan terkait Blogger Tools - Memasang CSS Minifier di Blogger! pada artikel kali ini, semoga bermanfaat serta bisa menjadi referensi terbaik buat teman-teman semuanya. Jangan lupa berlangganan, guna mendapatkan update-an terbaru secara gratis.

Posting Komentar

0 Komentar