4 يناير، 2016

مدون محترف اضافات بلوجر CSS إضافة أداة ضغط أكواد CSS في بلوجر

إضافة أداة ضغط أكواد CSS في بلوجر

اليوم في مدون محترف سوف نتعرف على أداة أكثر من رائعة، وتُعتبر من أفضل الأدوات في ضغط أكواد CSS في قوالب بلوجر

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


كيفية إضافة أداة ضغط أكواد CSS في بلوجر

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

<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 .right{float:right;margin-right:1%}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#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 10px 0 0;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="قم بنسخ كود الـ CSS هُنا..." 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;);">ضغط الأكواد</button>
<button onclick="clearField(&quot;cssField&quot;);">مسح الأكواد</button>
<button onclick="selectAll(&quot;cssField&quot;);">نسخ الأكواد</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,"<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>
</div>

يُمكنك تنسيق شكل الأداة كما تريدون
بعد تنسيق الكود كما تريد يُمكنك الضغط على نشر الصفحة ومبروك عليك الأداة.
لا تنسى مُشاركة الموضوع مع اصدقائك ودعمنا عبر التعليقات.

مواضيع ذات صلة
إضافة أداة ضغط أكواد CSS في بلوجر
4 / 5
بواسطة

هناك 16 تعليقًا :

  1. اضافة رائعة أخي منير =q
    #حملة_شاركنا_لندعمك - تم نشر موضوع في مدونتي

    ردحذف
    الردود
    1. شكراً لك صديقي
      مرورك الرائع
      ولكن هاشتاغ الحملة لا يكتب داخل المواضيع
      فقط يكتب داخل موضوع الحملة

      حذف
  2. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. غير مرحب بتعليقاتك
      فنحن لا نقبل تعليقات من ينتهكون حقوق الملكية
      فأنا اعرف تعريبي للقوالب والاكواد التي اضعها في القوالب
      وانت قمت بمسح حقوقي ونسبتها لك

      حذف
  3. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر منك صديقي لا ننشر روابط إشهار

      حذف
  4. الردود
    1. شكراً لك صديقي
      وانت أيضًا

      حذف
  5. ابداع ابداع ي صديقي ,, ولاكن ي قلبوا . عندي موقع ^_^ هل اقدر اضيف هده الاداه , ويقوم بعملية الضغظ , اما خاص لبلوجر ؟..

    ردحذف
    الردود
    1. شكرًا لك صديقي
      تقريبًا الآداة مخصصة لقوالب بلوجر
      جرب إضافتها في موقعك ممكن تشتغل

      حذف
  6. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. اعتذر لمسح التعليق بسبب الرابط
      تقدر تتواصل معي عبر صفحتي على فيس بوك اسمها مدون محترف

      حذف
  7. ماشاء الله عليك مواضيع رائة بالنسبة لهذة الاداة حضرتك ذكرت انها تقوم بالضغط للاكواد تلقائى هل معنى هذا انه بعد ان ايف الاداة الى المدونة ستعمل من نفسها ؟ اى بدون ان اضع اكواد القالب فيها؟

    ردحذف
    الردود
    1. اهلًا صديقي
      يجب وضع الأكواد بداخل الآداة وأكواد CSS فقط
      ثم تقوم بالضغط على زر وبعدها تقوم بنسخ الكود النهائي ووضعه في مدونتك

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r