اضافة اداة ضغط اكواد css لبلوجر

اليوم وفي هذا التدوينة نشرح لكم كيف إضافة إداة ضغط وتصغير حجم ملفات CSS في صفحة ثابتة في مدونة بلوجر

اداة ضغط الاكواد CSS Minify

أداة CSS Minify هي أداة تستخدم لتقليل حجم ملفات CSS وتحسين سرعة تحميل صفحات الويب. عادةً ما يتم استخدام أدوات CSS Minify لإزالة المسافات الفارغة والتنصيصات والتعليقات وتحويل الأكواد الزائدة والمكررة في ملفات CSS إلى أكواد أكثر كفاءة.

شاهد أيضاً :-

هذا يتيح للمتصفحات تحميل ملفات CSS بشكل أسرع، مما يؤدي إلى تحسين سرعة تحميل صفحات الويب بشكل عام. يمكن استخدام أدوات CSS Minify عبر الإنترنت أو كجزء من الأدوات المتوفرة في برامج التحرير والتطوير المختلفة للويب.

خطوات تثبيت اداة CSS Minify صفحة ثابتة بلوجر

يمكنك استخدام الخطوات التالية لتثبيت أداة ضغط أكواد CSS على مدونتك:

1. قم بتسجيل الدخول إلى حسابك في بلوجر واختر المدونة.
2. من لوحة التحكم انتقل إلى الصفحات.
3. انقر على "إنشاء صفحة جديدة" وسمها على سبيل المثال "أداة ضغط CSS".
4. انقر على زر "HTML" في أعلى محرر الصفحة الجديدة.
5. الان انسخ الكود التالي والصقه في المحرر:

<div class="container">
  <div id="cssminifier">
    <textarea autofocus="" id="cssField" placeholder="Enter CSS code here..." spellcheck="false"></textarea>
    <div class="box">
      <input class="opt1" id="stripAllComment" type="checkbox"/>
      <label for="stripAllComment">إزالة كل التعليقات</label>
      <input checked="" class="opt2" id="superCompact" type="checkbox"/>
      <label for="superCompact">ضغط متقدم</label>
      <input class="opt3" id="betterIndentation" type="checkbox"/>
      <label for="betterIndentation">الحفاظ على التنسيق</label>
      <input class="opt4" id="keepLastComma" type="checkbox"/>
      <label for="keepLastComma">إزالة آخر فاصلة من الأكواد</label>
    </div>
    <div id="error-msg"></div>
    <div class='btnF'>
      <button class="button"  id="compressCsS" onclick="compressCSS(&quot;cssField&quot;);">ضغط الأكواد</button>
      <button class="button" id="ClearCode" onclick="clearField(&quot;cssField&quot;);">مسح الأكواد</button>
      <button class="button" id="SelectCode" onclick="selectAll(&quot;cssField&quot;);">نسخ الأكواد</button>
    </div>
  </div>
</div>
<style>
.container { margin: 20px auto; width:700px; background: #fff; border: 1px solid #ddd; padding: 20px; font-size: 14px; } #cssminifier { width: 100%; text-align: right; } #cssminifier .box { margin: 10px auto 10px; } #cssminifier .box p { margin: 0 0 2px } #cssminifier button { cursor: pointer; } #cssminifier .col { width: 48%; margin: 0 auto 30px } #cssminifier .right { float: right; margin-right: 1% } #cssminifier .left { float: left; margin-left: 1% } #cssminifier .box { background: #2980b9; text-align:center; padding:10px 10px 40px 20px; margin: 0; } #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 } .clearfix::before, .clearfix::after { content: ""; display: table; clear: both; } .label-inline { display: inline-block; margin-right: 10px; } #cssField { width: 100%; height: 200px; padding: 5px; margin-top: 10px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; font-size: 14px; } #cssField:focus { outline: none; border-color: #4CAF50; } #cssField::placeholder { color: #ccc; } @media (max-width: 600px) { .next-wrap { width: 90%; } } .container input[type="url"]{width:100%;padding:12px 20px;margin:8px 0;display:inline-block;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;} .container textarea:hover{border:1px solid var(--linkC);transition:var(--themeC);} .container textarea { padding: 10px; margin-bottom: 20px; border-radius: 5px; border:2px solid; resize:none; width: 100%; } .container .button{border:none;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:14px;margin:4px 2px;cursor:pointer;border-radius:4px;}.container button:hover {background-color: #3e8e41;} .drK .container{background:var(--darkBa);box-shadow:0 10px 40px rgba(0,0,0,0.2);}.drK .container input{background:var(--darkBs);}
</style>
<script>
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(/&lt;(.*?)('|")(.*?)('|")&gt;/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, "&lt;").replace(/>/g, "&gt;"), 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>

هذا هو كود HTML و CSS و JavaScript الذي ينشئ صفحة ويب بها أداة لضغط CSS. يتيح للمستخدم إدخال كود CSS وضغطه عن طريق إزالة الأحرف غير الضرورية والتعليقات ، بالإضافة إلى خيارات أخرى.

ينتهي هنا موضوعنا عن "اضافة اداة ضغط اكواد css لبلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية