Cara Membuat Halaman CSS Minifier Tool Blogspot Resonsive

Membuat Tool CSS manifier tool pada halaman statis blogger. Apa fungsi, bagaimana cara memasangnya dan cara menggunakannya akan kita bahas pada tutorial dewa plokis kali ini. Ini adalah tool kedua yang saya bagikan, yang mana sebelumnya saya sudah membagikan tutorial tentang Cara Membuat Halaman Word Counter di Blogger

Tool Compress ini berfungsi untuk mengecikan file css, sehingga file CSS yang di muat oleh blog semakin kecil dan otomatis akan meningkatkan kecepatan loading blog. Jika loading blog Anda kencang, maka otomatis juga blog Anda sudah SEO Friendly.

Apakah Anda pernah mendapatkan pesan pada page speed tool bahwa Anda disarankan untuk mengompres file CSS untuk mempercepat loading blog. Kemudian Anda mencari di mesin pencari dengan mengetikkan keyword cara compress css atau biasa juga dengan pencarian cara manify CSS.

Beberapa link dan website tertentu sudah menyediakan tool compress tersebut, bahkan sudah include dengan JS dan HTML Manifier atau alat kompres java script dan HTML. Rata-rata semua web tool tersebut gratis.

Jika Anda tidak ingin repot-repot untuk sering mampir ke wen tool tersebut, maka Anda bisa memasangnya pada halaman statis blog Anda sendiri yang pasti dengan style yang keren dan responsive. Silakan ikuti instruksinya dibawah ini:

Cara Membuat Halaman CSS Manifier Tool Blogspot

# 1. Silakan login terlebih dahulu ke Akun Blogger Anda

# 2. Klik Page lalu klik New Page

# 3. Tulis terlebih dahulu nama halaman yang akan Anda buat, misalnya : Kompres CSS, CSS Manifier dll

# 4. Selanjutnya, klik pada HTML (Sebelehnya Compose), lalu copy dan pastekan semua kode dibawah ini kedalam halaman HTML tersebut

<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. Sekarang saatnya untuk publish Page CSS Manifier yang sudah Anda buat.

# 6. Selamat...!!! Anda sudah memiliki halaman kompres tool css sendiri dan tidak perlu lagi mengunjungi link orang lain untuk mengompres file CSS. Anda bisa untuk melakukan test mengompres file css kode diatas dan lihat hasilnya.

Demikian tutorial singkat kali ini tentang Cara Membuat Halaman CSS Manifier Tool Blogspot responsive dan keren. Semoga sukses dan bisa diterapkan pada halaman statis blog Anda.

Share