آخبار الموقع
recent
404
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة
  • العودة الى الصفحة الرئيسية
  • الثلاثاء، 15 نوفمبر، 2016

    إضافة أداة ضغط الأكواد لمنصة بلوجر

    إضافة أداة ضغط الأكواد لمنصة بلوجر


    هناك الأدوات كثير لمنصة بلوجر لكن أداة ضغط الأكواد لها أهمية كبير في المدونة منها أنك من خلالها تكسب زيارات ذلك يعتمد علي شهرة مدونتك في الكثير من الأحيان عندما يريد شخص ما ضغط الاكواد سواء أي كود فأنه سوف يتجه إلي مدونتك من أجل معرفة المواضيع الجديدة عندك ومن أجل ضغط الاكواد ومن ثم تصبح مدونتك أو موقعك إحترافي بحيث يحتوي علي كل الأدوات اللازمة لتعديل علي القالب أو تحويل الاكواد وغيرها من الادوات ، لذلك في هذه التدوينة نتعلم كيفية إضافة أداة ضغط الأكواد لمنصة بلوجر وذلك في الصفحات الثابتة فقط .
    شرح تركيب الأداة :
    1. أولا من لوحة تحكم القالب ثم إلي قسم الصفحات وبالضغط علي إنشاء صفحة جديدة.
    2. بعد إنشاء الصفحة الجديدة تقوم بالذهاب إلي تبويب HTML.
    3. وتقوم باللصق الأكواد الأتية فيه.
    <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:#2980b9;text-align:center;padding:40px 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-family: inherit;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 0 0 10px;vertical-align:middle;border:none;outline:none}
    #cssminifier br{display:none}
    </style>
    <span class="clear"></span>
    <textarea autofocus="" id="cssField" placeholder="ضع الكود هنا" spellcheck="false"></textarea>
    <br />
    <div class="button-group">
    <button onclick="compressCSS(&quot;cssField&quot;);">ضغط الكود</button>
    <button onclick="selectAll(&quot;cssField&quot;);">تحديد الكل</button>
    <button onclick="clearField(&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>
    1. وبعد هذا قم بالحفظ الصفحة ومبروك عليك الأداة.
    2. من أجل معرفة رابط الأداة سوف تري بعد حفظ الصفحة أن الأداة قد تم تثبتها بالنجاح في قائمة الصفحات تقوم بالضغط علي أسفل الأداة وسوف تري كلمة معاينة إضغط عليها حتي يتم نسخ الرابط.
    3. من أجل أن تفهم أكثر ادعوك لمشاهدة الفيديو التالي.
    تابعونا على

    أنا عادل إبراهيم مؤسس موقع إتقان ويب هدفي الأول هو تطوير المحتوي العربي وذلك عن طريق مدونتي التي أنشر فيها دروس وشروحات تقنية يوميا لي خبرة في البرمجة والتصميم والموشن جرافيك وغيرها

    الكاتب : Adel Ibrahim

    ليست هناك تعليقات:

    إرسال تعليق

    تصميم : عالم المدون