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

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

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

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

تحميل المولد