Hello sobat icloudZer kali ini saya akan memberikan informasi mengenai bagaimana cara membuat widget tools CSS minifier di blogger, atau cara membuat pengecil CSS di halaman statis blog dengan mudah
Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Pengertian CSS Minifier
CSS Minifier atau pengecil CSS ini adalah sebuah tools atau peralatan yang di buat dengan mengunakan beberapa kode program yang memiliki fungsi untuk mengecilkan ukuran kode CSS atupun menyederhanakan kode CSS mengunakan tools CSS minifier tersebut
Biasanya yang sering menngunakan Tools CSS tersebut adalah orang yang mengerti bagaimana kode CSS bekerja, sehingga ia harus menggunakan alat untuk membantunya menyederhanakan lagi kode CSS tersebut
Info: Bisa dibilang bahwa CSS Minifier adalah sebuah alat untuk membantu menyederhanakan tanpa mengurangi fungsi kode dalam sebuah kode CSS
Contoh Tampilan
Jika kamu tidak penasaran dengan bagaimana kah contoh tampilan dari CSS minifier tersebut kamu bisa melihat nya seperti contoh tampilan di bawah ini
Info: Tersedia juga contoh tampilan di halaman statis silahkan periksa disini
Cara penerapan
Sebelumnya saya sudah membahas mengenai CSS Minifier ini untuk anda pahami, ok 👌 sekarang saya akan mengajarkan cara penerapannya kepada anda
Nah untuk membuat atau menerapkan CSS Minifier sebenarnya mudah dan gampang sekali, anda hanya perlu metakkan kode yang saya berikan pada sebuah halaman tanpa harus pergi ke edit HTML
Info: Untuk lebih lengkapnya saya akan membuat langkah langkah yang bisa anda lakukan
- Salin kode CSS Minifier
- Pergi ke Page atau Halaman anda diblogger
- Buat halaman baru atau New Page
- Letakkan kode CSS Minifier pada halaman tersebut
- Simpan kemudian anda bisa memeriksa Tampilan CSS minifiernya
Kode CSS Minifier
Berikut kode CSS Minifier yang bisa anda gunakan
<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: #f80000;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: #f80000}#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="Paste your CSS code here..." spellcheck="false"></textarea><div class="button-group"><div class="box"><input class="opt1" id="stripAllComment" type="checkbox" /> <label for="stripAllComment">Strip all comments</label><input class="opt2" id="superCompact" type="checkbox" /> <label for="superCompact">Super compact</label><input class="opt3" id="betterIndentation" type="checkbox" /> <label for="betterIndentation">Keep indentation</label><input checked="" class="opt4" id="keepLastComma" type="checkbox" /> <label for="keepLastComma">Remove the last semicolon</label></div><button onclick="compressCSS("cssField");">Compress CSS</button><button onclick="clearField("cssField");">Clear Field</button> <button onclick="selectAll("cssField");">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></div>Info: Oke sobat icloudZer Mudah mudahan bermanfaat ya, bagikan artikel ini jika dirasa bermanfaat ok 👌