يمكنك الان شراء مساحة اعلانية علي موقعنا معرفه المزيد

اعلان

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

في هذا التدوينة نشرح لكم كيف إضافة إداة ضغط وتصغير حجم ملفات CSS في صفحة ثابتة في مدونة بلوجر
الرجاء الانتظار 0 ثانية...
قم بالتمرير لأسفل وانقر فوق فتح الرابط للتوجيه
تم فحص وتجهيز الرابط

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

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

اداة ضغط الاكواد 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 لبلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

عن الكاتب

عبدالحميد ميدو، مصمم فلاتر سنابشات ومنشئ محتوى رقمي بخبرة تزيد عن 7 سنوات. لدي شغف بأحدث التقنيات، اهتمامًا خاصًا بلغات البرمجة كـ Python, JS وCSS.

إرسال تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.