كيفية اضافة صندوق اكواد بشكل احترافي

كيفية اضافة صندوق اكواد بشكل احترافي

طريقة اضافة صندوق اكواد بشكل احترافي

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

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


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

كيفية وضع أكواد HTML في مدونات بلوجر بطريقة احترافية :

ابحث عن : ]]></b:skin> وضع الكود فوقه مباشرة كما في الصورة 

*,*:after,*:before {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;  -webkit-font-smoothing: antialiased;  font-smoothing: antialiased;  font-smooth: always;}body {  font-family: open-sans, Arial, sans-serif;  background-color: #71D4B7;  font-size: 62.5%;}body label {  background-color: white;  color: #000;  padding: 10px 15px;  font-size: 18px;  font-weight: bold;  display: inline-block;  position: absolute;  top: 10px;  left: 10px;  box-shadow: 4px 3px 0px rgba(0, 0, 0, 0.15);  cursor: pointer;}body label:hover {  background-color: rgba(255, 255, 255, 0.75);}body label:hover ~ h1 {  display: block;}body input {  display: none;}body input:checked ~ h1 {  display: block;}body input:checked ~ label {  background-color: rgba(255, 255, 255, 0.75);}body h1 {  display: none;  font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;  font-size: 18px;  color: #000;  background-color: #fff;  padding: 10px;  position: absolute;  left: 55px;  top: 10px;  box-shadow: 4px 3px 0px rgba(0, 0, 0, 0.15);  z-index: 999;}body h1:hover {  display: block;}body h1 a, body h1 a:visited, body h1 a:hover {  color: #000;}.code-editor {  width: 800px;  margin: 20px auto;}.code-editor.fullscreen {  width: calc(100% - 40px);  position: fixed;  height: calc(100% - 120px);  margin: 20px;}.code-editor .controls {  background-color: #E8ECEF;  font-size: 10px;  font-size: 1rem;  display: block;  padding: 15px;  text-align: right;  -webkit-border-top-left-radius: 6px;  -ms-border-top-left-radius: 6px;  -moz-border-top-left-radius: 6px;  -o-border-top-left-radius: 6px;  border-top-left-radius: 6px;  -webkit-border-top-right-radius: 6px;  -ms-border-top-right-radius: 6px;  -moz-border-top-right-radius: 6px;  -o-border-top-right-radius: 6px;  border-top-right-radius: 6px;}.code-editor .controls i {  color: #BAC1C9;  cursor: pointer;  margin-left: 15px;}.code-editor .controls i:hover {  color: #818e9c;}.code-editor .embed-nav {  background-color: #384a56;  padding: 15px;}.code-editor .embed-nav ul {  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-flex-flow: row wrap;  -moz-flex-flow: row wrap;  -ms-flex-flow: row wrap;  flex-flow: row wrap;}.code-editor .embed-nav ul li {  margin-right: 10px;}.code-editor .embed-nav ul li a {  font-size: 8px;  font-size: 0.8rem;  color: #BAC1C9;  padding: 5px 10px;  -webkit-border-radius: 15px;  -ms-border-radius: 15px;  -moz-border-radius: 15px;  -o-border-radius: 15px;  border-radius: 15px;  text-decoration: none;}.code-editor .embed-nav ul li a.active {  background-color: #233038;}.code-editor .embed-nav .logo-wrap {  display: none;}code[class*="language-"],pre[class*="language-"] {  color: #f8f8f2;  text-shadow: 0 1px rgba(0, 0, 0, 0.3);  font-family: Consolas, Monaco, 'Andale Mono', monospace;  direction: ltr;  text-align: left;  white-space: pre;  word-spacing: normal;  word-break: normal;  line-height: 1.5;  -moz-tab-size: 4;  -o-tab-size: 4;  tab-size: 4;  -webkit-hyphens: none;  -moz-hyphens: none;  -ms-hyphens: none;  hyphens: none;}/* Code blocks */pre[class*="language-"] {  padding: 0 15px 15px 15px;  overflow: auto;  font-size: 10px;  font-size: 1rem;}:not(pre) > code[class*="language-"],pre[class*="language-"] {  background: #4e606c;}/* Inline code */:not(pre) > code[class*="language-"] {  padding: .1em;  border-radius: .3em;}.token.comment,.token.prolog,.token.doctype,.token.cdata {  color: #9cacb7;}.token.punctuation {  color: #f8f8f2;}.namespace {  opacity: .7;}.token.function {  color: #F5755A;}.token.property,.token.tag,.token.constant,.token.symbol {  color: #71D4B7;}.token.boolean,.token.number {  color: #ae81ff;}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin {  color: #FC659A;}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable {  color: #EFB26E;}.token.atrule,.token.attr-value {  color: #e6db74;}.token.keyword {  color: #66d9ef;}.token.regex,.token.important {  color: #fd971f;}.token.important {  font-weight: bold;}.token.entity {  cursor: help;}.token.deleted {  color: red;}.token.inserted {  color: green;}pre.line-numbers {  position: relative;  padding-left: 55px;  counter-reset: linenumber;}pre.line-numbers > code {  position: relative;}.line-numbers .line-numbers-rows {  position: absolute;  pointer-events: none;  top: 22px;  font-size: 100%;  left: -100px;  width: 40px;  /* works for line-numbers below 1000 lines */  letter-spacing: -1px;  color: #879BA6;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}.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;}

ثانيا : في نفس القالب نبحث عن امر </body> ونضع فوقه هذا الكود 
ملاحظة : اذا لم يتم قبوله بعد عملية الحفظ قم بتحويله من هنا تحويل اكود الاتش تي ميل

<script type='text/javascript'>$(document).ready(function(){// Fullscreen Functionality// Put this together quickly so needs to be improved$('.code-editor .fullscreen').on( "click", function() {var windowHeight = $(window).height() - 132;if($('.code-editor').hasClass('fullscreen')){$('.code-editor').removeClass('fullscreen');$(this).addClass('fa-expand').removeClass('fa-compress');$('.code-editor pre').css({height: 'auto'});} else {$('.code-editor').addClass('fullscreen');$(this).removeClass('fa-expand').addClass('fa-compress');$('.code-editor pre').css({height: windowHeight});}});// Accordion functionality$('.code-editor .accordion').on( "click", function() {$(this).toggleClass('fa-chevron-up').toggleClass('fa-chevron-down').parent().parent().children().not('.controls').slideToggle();});});// Prism.js Plugin//// http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+php+scss+bash&plugins=line-numbers////-------------------------------self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in a)a.hasOwnProperty(s)&&(l[s]=a[s]);l[o]=i[o]}return r[e]=l},DFS:function(e,n){for(var a in e)n.call(e,a,e[a]),"Object"===t.util.type(e)&&t.languages.DFS(e[a],n)}},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];)t.highlightElement(a,e===!0,n)},highlightElement:function(a,r,i){for(var l,o,s=a;s&&!e.test(s.className);)s=s.parentNode;if(s&&(l=(s.className.match(e)||[,""])[1],o=t.languages[l]),o){a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var c=a.textContent;if(c){var g={element:a,language:l,grammar:o,code:c};if(t.hooks.run("before-highlight",g),r&&self.Worker){var u=new Worker(t.filename);u.onmessage=function(e){g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g)},u.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g)}}},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i)n[l]=i[l];delete n.rest}e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var o=n[l];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var c=o[s],g=c.inside,u=!!c.lookbehind,f=0,h=c.alias;c=c.pattern||c;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){c.lastIndex=0;var m=c.exec(d);if(m){u&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+"</"+i.tag+">"},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);;Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\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(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&amp;/,"&"))});;Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},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.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),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.php=Prism.languages.extend("clike",{keyword:/\b(and|or|xor|array|as|break|case|cfunction|class|const|continue|declare|default|die|do|else|elseif|enddeclare|endfor|endforeach|endif|endswitch|endwhile|extends|for|foreach|function|include|include_once|global|if|new|return|static|switch|use|require|require_once|var|while|abstract|interface|public|implements|private|protected|parent|throw|null|echo|print|trait|namespace|final|yield|goto|instanceof|finally|try|catch)\b/gi,constant:/\b[A-Z0-9_]{2,}\b/g,comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])(\/\/|#).*?(\r?\n|$))/g,lookbehind:!0}}),Prism.languages.insertBefore("php","keyword",{delimiter:/(\?>|<\?php|<\?)/gi,variable:/(\$\w+)\b/gi,"package":{pattern:/(\\|namespace\s+|use\s+)[\w\\]+/g,lookbehind:!0,inside:{punctuation:/\\/}}}),Prism.languages.insertBefore("php","operator",{property:{pattern:/(->)[\w]+/g,lookbehind:!0}}),Prism.languages.markup&&(Prism.hooks.add("before-highlight",function(e){"php"===e.language&&(e.tokenStack=[],e.backupCode=e.code,e.code=e.code.replace(/(?:<\?php|<\?)[\w\W]*?(?:\?>)/gi,function(n){return e.tokenStack.push(n),"{{{PHP"+e.tokenStack.length+"}}}"}))}),Prism.hooks.add("before-insert",function(e){"php"===e.language&&(e.code=e.backupCode,delete e.backupCode)}),Prism.hooks.add("after-highlight",function(e){if("php"===e.language){for(var n,a=0;n=e.tokenStack[a];a++)e.highlightedCode=e.highlightedCode.replace("{{{PHP"+(a+1)+"}}}",Prism.highlight(n,e.grammar,"php"));e.element.innerHTML=e.highlightedCode}}),Prism.hooks.add("wrap",function(e){"php"===e.language&&"markup"===e.type&&(e.content=e.content.replace(/(\{\{\{PHP[0-9]+\}\}\})/g,'<span class="token php">$1</span>'))}),Prism.languages.insertBefore("php","comment",{markup:{pattern:/<[^?]\/?(.*?)>/g,inside:Prism.languages.markup},php:/\{\{\{PHP[0-9]+\}\}\}/g}));;Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm}),Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i}),Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i}),Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});;Prism.languages.bash=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])(#.*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/("|')(\\?[\s\S])*?\1/g,inside:{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^\}]+\})/g}},keyword:/\b(if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)\b/g}),Prism.languages.insertBefore("bash","keyword",{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^}]+\})/g}),Prism.languages.insertBefore("bash","comment",{important:/(^#!\s*\/bin\/bash)|(^#!\s*\/bin\/sh)/g});;Prism.hooks.add("after-highlight",function(e){var n=e.element.parentNode;if(n&&/pre/i.test(n.nodeName)&&-1!==n.className.indexOf("line-numbers")){var t,a=1+e.code.split("\n").length;lines=new Array(a),lines=lines.join("<span></span>"),t=document.createElement("span"),t.className="line-numbers-rows",t.innerHTML=lines,n.hasAttribute("data-start")&&(n.style.counterReset="linenumber "+(parseInt(n.getAttribute("data-start"),10)-1)),e.element.appendChild(t)}});;</script>

الان سوف نقوم بدخول الى المشاركة  :

تحميل : اضافة صندوق اكواد 

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

كلمة : ضع الكود هنا : هو مكان وضع الكود html او اي كلمة .