For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat tools CSS Minifier keren di blogger

Membuat tools pengecil kode CSS di blogger adalah alat untuk menyederhanakan kode CSS jika di mungkinkan

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

  1. Salin kode CSS Minifier
  2. Pergi ke Page atau Halaman anda diblogger
  3. Buat halaman baru atau New Page
  4. Letakkan kode CSS Minifier pada halaman tersebut
  5. 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(&quot;cssField&quot;);">Compress CSS</button><button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <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></div>

Info: Oke sobat icloudZer Mudah mudahan bermanfaat ya, bagikan artikel ini jika dirasa bermanfaat ok 👌

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.