جديد..اضف جميع الاكواد البرمجية داخل مواضيع بلوجر بشكل جميل و منسق

جديد..اضف جميع الاكواد البرمجية داخل مواضيع بلوجر بشكل جميل و منسق
السلام عليك طال غيابنا و نعثدر بشدة بسبب الغياب فهو خارج عن ارادتنا , اليوم انشاءلله سوف نشرح طريقة وضع اكواد html و css و JavaScript و اكواد اخرى بتنسيق جميل و رائع . هذه الاضافة طلبها مني احد الاخوى على حسابي الفيسبوك و بما انني لم اشرحها من قبل قررت اضع عليها تدوينة.
جديد..اضف جميع الاكواد البرمجية داخل مواضيع بلوجر بشكل جميل و منسق
الطريقة التي سوف اقدمها لكم غير موجودة على المحتوى العربي تقريبا 2 مدونات من وضعها اما المعاينة فهي من سوف ترونها الآن و التي سوف اضع بها الاكواد اللازمة , لأن ليس من الصعب على أي شخص يستخدم مدونات بلوجر إظهار أكواد HTML وجافا سكريبت داخل منشورات المدونة.
ربما قد رأيت أيضًا أشخاصًا  يعرضون اكواد HTML و JavaScript داخل منشورات Blogger مع مربعات العرض المخصصة.

طريقة التركيب
أولا خد نسخة احتياطية من القالب تحسبا لأي خطأ قمت به.
تانيا قم بالضغط على Cntrl + F و إبحث عن وسم 
]]></b:skin>
فسوف تجد منه اثنان اختار الوسم التاني ثم فوقه اي قبله ضع هذا الكود الخاص ب css للإضافة .

pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2B303B;position:relative;max-height:500px;text-align:left;direction:ltr;}
pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#2B303B;padding:10px;left:0;right:0;color:#8790a1;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold;}
pre::after{content:'ضغطتين للنسخ';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#8790a1;line-height:20px;}
pre:hover::after{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:-8px;visibility:visible;}
pre code{display:block;background:none;border:none;color:#C0C5CE;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold;font:14px 'Consolas','Monaco',monospace,Courier,Courier New;}
pre code .token.prolog{color:#777;}
pre code .token.doctype{color:#777;}
pre code .token.cdata{color:#777;}
pre code .token.url{color:#ccc;}
pre .language-css .token.string{color:#ccc;}
pre .style .token.string{color:#ccc;}
pre code .token.atrule{color:#009999;}
pre code .token.atrule{color:#1baeb0;}
pre code .token.regex{color:#ccc;}
pre code .token.important{font-weight:bold;}
pre code .token.entity{color:#759bb9;cursor:help;}
pre code .namespace{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";filter:alpha(opacity=0.8);opacity:.8;}
pre code .token.tag,.language-markup .token.punctuation{color:#A3BE8C;}
pre code .token.attr-name{color:#C0C5CE;}
pre code .token.selector{color:#759bb9;}
pre code .token.property{color:#759bb9;}
pre code .token.comment{color:#8c919a;font-style:italic;}
pre code .token.punctuation{color:#8FA1B3;}
pre code .token.operator{color:#4d9bd8;}
pre code .token.number,pre code .token.boolean{color:#cec768;}
pre code .token.attr-value{color:#f79029;}
pre code .token.string{color:#A3BE8C;}
pre code .token.keyword{color:#94719c;font-style:italic;}
code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;}
pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;}
/*======comments pre======*/
.comments pre{padding:10px 10px 15px 10px;background:#2c323c;}
.comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border:none;}
.comments pre::after{font-size:11px;}
.comments pre code{color:#eee;}
.comments pre.line-numbers{padding-left:10px;}
/*=======line numbers========*/
pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code{position:relative;}
.line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0;}
.line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype='HTMLku']:before{color:#f79029;}
pre[data-codetype='CSSku']:before{color:#759bb9;}
pre[data-codetype='JavaScriptku']:before{color:#d4b447;}
pre[data-codetype='JQueryku']:before{color:#94719c;}
/*=======transition=======*/
pre::after{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
/*=======border radius=======*/
pre,.comments pre::before{border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
تالثا قم بوضع هذا السكربت فوق وسم body المقفول

!function(){var o=/\blang(?:uage)?-(?!\*)(\w+)\b/i,y=self.Prism={languages:{insertBefore:function(e,t,a,n){var r=(n=n||y.languages)[e],i={};for(var s in r)if(r.hasOwnProperty(s)){if(s==t)for(var g in a)a.hasOwnProperty(g)&&(i[g]=a[g]);i[s]=r[s]}return n[e]=i},DFS:function(e,t){for(var a in e)t.call(e,a,e[a]),"[object Object]"===Object.prototype.toString.call(e)&&y.languages.DFS(e[a],t)}},highlightAll:function(e,t){for(var a,n=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),r=0;a=n[r++];)y.highlightElement(a,!0===e,t)},highlightElement:function(e,t,a){for(var n,r,i=e;i&&!o.test(i.className);)i=i.parentNode;if(i&&(n=(i.className.match(o)||[,""])[1],r=y.languages[n]),r){e.className=e.className.replace(o,"").replace(/\s+/g," ")+" language-"+n,i=e.parentNode,/pre/i.test(i.nodeName)&&(i.className=i.className.replace(o,"").replace(/\s+/g," ")+" language-"+n);var s=e.textContent.trim();if(s){var g={element:e,language:n,grammar:r,code:s=s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/\u00a0/g," ")};if(y.hooks.run("before-highlight",g),t&&self.Worker){var l=new Worker(y.filename);l.onmessage=function(e){g.highlightedCode=c.stringify(JSON.parse(e.data)),g.element.innerHTML=g.highlightedCode,a&&a.call(g.element),y.hooks.run("after-highlight",g)},l.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=y.highlight(g.code,g.grammar),g.element.innerHTML=g.highlightedCode,a&&a.call(e),y.hooks.run("after-highlight",g)}}},highlight:function(e,t){return c.stringify(y.tokenize(e,t))},tokenize:function(e,t){var a=y.Token,n=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}e:for(var i in t)if(t.hasOwnProperty(i)&&t[i]){var s=t[i],g=s.inside,l=!!s.lookbehind||0;s=s.pattern||s;for(var o=0;o<n.length;o++){var c=n[o];if(n.length>e.length)break e;if(!(c instanceof a))if(s.lastIndex=0,u=s.exec(c)){l&&(l=u[1].length);var u,p=u.index-1+l,h=p+(u=u[0].slice(l)).length,d=c.slice(0,p+1),f=c.slice(h+1),m=[o,1];d&&m.push(d);var b=new a(i,g?y.tokenize(u,g):u);m.push(b),f&&m.push(f),Array.prototype.splice.apply(n,m)}}}return n},hooks:{all:{},add:function(e,t){var a=y.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=y.hooks.all[e];if(a&&a.length)for(var n,r=0;n=a[r++];)n(t)}}},c=y.Token=function(e,t){this.type=e,this.content=t};if(c.stringify=function(e){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e)){for(var t=0;t<e.length;t++)e[t]=c.stringify(e[t]);return e.join("")}var a={type:e.type,content:c.stringify(e.content),tag:"span",classes:["token",e.type],attributes:{}};"comment"==a.type&&(a.attributes.spellcheck="true"),y.hooks.run("wrap",a);var n="";for(var r in a.attributes)n+=r+'="'+(a.attributes[r]||"")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'" '+n+">"+a.content+"</"+a.tag+">"},self.document){var e=document.getElementsByTagName("script");(e=e[e.length-1])&&(y.filename=e.src,document.addEventListener&&!e.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",y.highlightAll))}else self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,n=t.code;self.postMessage(JSON.stringify(y.tokenize(n,y.languages[a]))),self.close()},!1)}(),Prism.languages.markup={comment:/<!--[\w\W]*?--(>|>)/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]+?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*[\w\W]*?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(('|")[\w\W]*?(\2)|[^\s>]+)/gi,inside:{punctuation:/=/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:/@[\w-]+?(\s+.+)?(?=\s*{|\s*;)/gi,url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,property:/(\b|\B)[a-z-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/gi,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}}),Prism.languages.javascript={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0},keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,boolean:/\b(true|false)\b/g,number:/\b-?(0x)?\d*\.?\d+\b/g,operator:/[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\//g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/gi,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}),Prism.languages.java={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,keyword:/\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/g,boolean:/\b(true|false)\b/g,number:/\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+[e]?[\d]*[df]\b|\W\d*\.?\d+\b/gi,operator:{pattern:/([^\.]|^)([-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\/|%|\^|(<){2}|($gt;){2,3}|:|~)/g,lookbehind:!0},ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
$('pre').attr('class', 'line-numbers');Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)});
for(var pres=document.querySelectorAll("var,samp,strong,em,code,pre,kbd,blockquote,value,textarea"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);

الان انتهينا من داخل القالب 
قم بتحميل الملف الملحق من اسفل هذا الموضوع فهو عبارة عن كود خاص بصفحة تابثة على بلوجر يمكنك فتحه مباشرة او من الافضل ان تنشئ صفحة تابثة على مدونتك قم بتسميتها بما تريد ثم اختر جهة html عوض تأليف و الصق الكود و بعذها قم بنشر الصفحة.

الان بعد الدخول الى الصفحة سوف تجد خيار الاول عند الضغط عليه اختر نوع الاكود التي تريد تضمينها داخل المواضيع .
في الصندوق الاول ضع الكود المراد تضمينه بشكل عادي ثم اضغط على توليد الكود .

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

من وضع الكود الخاص بالصفحة و لم يتم تنسيقها فيكون المشكل من القالب فيجم ان تعدل على اكواد css الخاصة بالاضافة او يمكنكم توليد الاكواد من هذه الصفحة الجاهزة
مولد الاكواد

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

لذلك استمتعو بهذه الاضافة الناذرة و الجميلة على ان القاكم غدا انشالله مع جديد و الحصري فقط على موقع تقني واي.
اسم الملف : generator code حجم الملف : 5.8kb نوع الخادم : Google drive

6 تعليقات "جديد..اضف جميع الاكواد البرمجية داخل مواضيع بلوجر بشكل جميل و منسق"

  1. حياك الله علي مجهودك
    Ameer Darwesh

    ردحذف
  2. شكرا لك اخي مثل هذه العليقات هي من تشجعنا لنشر المزيد من الحصريات

    ردحذف
  3. اين يوجد الوسم المقفول

    ردحذف
    الردود
    1. شكرا على التنبيه تم وضعه الان في الموضوع وسم body يوجد في اخر القالب

      حذف
  4. عند اضافة الكود التانى لايتم حفظ القالب يعطى هده الرسالة

    ‏حدث خطأ أثناء تحليل XML، في السطر 2171، العمود 3433: The content of elements must consist of well-formed character data or markup

    ردحذف
ملاحظة للجميع
  • المرجو ترك تعليق يتعلق بنفس هذا الموضوع.
  • لا يجوز الترويج للسلع أو البيع.
  • لا تقم بتضمين روابط مشبوهة في التعليقات.
  • سيتم حذف التعليقات ذات الروابط السبام تلقائيًا
  • *علق بشكل جيد ، شخصيتك تنعكس عند التعليق.

إعلان أول المقال

اعلان وسط المقال 1

اعلان وسط المقال 2

إعلان اسفل المقال