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

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

السلام عليك طال غيابنا و نعثدر بشدة بسبب الغياب فهو خارج عن ارادتنا , اليوم انشاءلله سوف نشرح طريقة وضع اكواد 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>

       <script type='text/javascript'>
       //<![CDATA[
/**
 * Prism: Lightweight, robust, elegant syntax highlighting
 * MIT license http://www.opensource.org/licenses/mit-license.php/
 * @author Lea Verou http://lea.verou.me
 */
!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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").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:/&lt;!--[\w\W]*?--(&gt;|&gt;)/g,prolog:/&lt;\?.+?\?&gt;/,doctype:/&lt;!DOCTYPE.+?&gt;/,cdata:/&lt;!\[CDATA\[[\w\W]+?]]&gt;/i,tag:{pattern:/&lt;\/?[\w:-]+\s*[\w\W]*?&gt;/gi,inside:{tag:{pattern:/^&lt;\/?[\w:-]+/i,inside:{punctuation:/^&lt;\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(('|")[\w\W]*?(\2)|[^\s>]+)/gi,inside:{punctuation:/=/g}},punctuation:/\/?&gt;/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&amp;#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))}),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:/(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/gi,inside:{tag:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/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}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\//g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/gi,inside:{tag:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/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}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\/|%|\^|(&lt;){2}|($gt;){2,3}|:|~)/g,lookbehind:!0},ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
//Line Number
$('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)});
//SelectorAll
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);

      //]]>
    </script>

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

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

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

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

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

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

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

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

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

    RépondreSupprimer
  3. Réponses
    1. شكرا على التنبيه تم وضعه الان في الموضوع وسم body يوجد في اخر القالب

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

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

    RépondreSupprimer
  5. الكود الثاني به خلل

    RépondreSupprimer
    Réponses
    1. الكود تم التحقق منه و هو سليم ماهو الخلل بالضبط

      Supprimer
  6. Erreur d'analyse XML, ligne 4157, colonne 223 : The entity name must immediately follow the '&' in the entity reference..

    RépondreSupprimer
    Réponses
    1. قمت بتغيير الاكواد مرة اخرى جرب الآن لانني جربت كل الاكواد و هي لا تعطيني اي error او خطأ

      Supprimer
  7. اخي اضف صورة تبين اي وسم هناك العديد ون وسم body ارجو الاجابة

    RépondreSupprimer
    Réponses
    1. تفضل مثل هذا موجود في اخر القالب
      https://i.postimg.cc/GhLjQQ5h/20200630-234414.jpg

      Supprimer
  8. شكرا اخي الكريم بدأت فعلا في التجربة على مدونتي الجديدة فقط اريد بعض الملاحظات و المساعدة
    Saidy123. Blogspot. Com

    RépondreSupprimer
    Réponses
    1. مرحبا بك اذا كان المحتوى انت من كتبه و ليس منسوخ من مدونة اخرى فهو جيد فقط تحتاج الى قالب جيد و سريع كما انني اوصيك بشدة شراء دومين مدفوع و لاتكون فيه الارقام مثل 123 فقط رقم واحد يكفي او بدون رقم فالاسم يلعب دور مهم جدا اي مساعدة اخرى يمكنك النزول الى الاسفل عند ايقونات التواصل الاجتماعي بوجد زر للواتساب راسلني للمساعدة.

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