اضافة اكواد html داخل الموضيع بشكل جديد واحترافي 2020

• شروحات بلوجر
• 0

ملاحظة : يرجى اخذ نسخة احتياطية قبل تركيب الاضافة

وصف الاضافة 

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

طريقة التركيب

• اذهب الى التخطيط (المظهر)
• اذهب الى تعديل html
• ابحث عن ]]></b:skin>
• ضع الكود الاتي فوقه (قبله)

]]></b:skin> code,codsm,kbd,pre,samp{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:auto;font-family:monospace}code,codsm,kbd{display:inline-block;border-radius:3px;padding:1px 5px;font-size:13px;white-space:pre-wrap;direction:ltr}code{background-color:#333;color:#fff;line-height:1.5}a code{text-decoration:none}codsm,kbd{background:#424242;color:#fff}mark{background-color:#f55151;color:#fff;padding:0 3.2px}pre{color:#212121;font-size:13px;font-weight:400;background-color:#333;border-left:4px solid;border-color:#f50057;max-height:500px;padding:6px 12px;margin:8px 0 16px;line-height:2;white-space:pre-wrap;overflow:auto;word-wrap:break-word;direction:ltr}pre.root:before,pre.user:before{font-weight:700;margin-right:7px;display:inline-block}pre.root{color:#eee;border-color:#f44336!important}pre.root:before{content:"root #";color:#f44336}pre.user{color:#eee;border-color:#64dd17!important}pre.user:before{content:"user $";color:#64dd17}pre.root,pre.user{background-color:#424242}pre[data-lang]{position:relative;display:block;padding:40px 0 0;border-radius:4px;background-color:#333;border:0;outline:0;overflow-x:auto;overflow-y:hidden;white-space:normal;max-height:100%}pre[data-lang]:before{content:attr(data-lang);position:absolute;top:0;left:0;right:0;padding:4px 0;text-indent:16px;color:#212121;font-family:Cairo,sans-serif;font-weight:500;font-size:16px;background-color:rgba(0,0,0,.07);border-radius:4px 4px 0 0;overflow:hidden;white-space:nowrap;text-transform:inherit;-o-text-overflow:ellipsis;text-overflow:ellipsis}pre[data-lang] code{display:block;color:#424242;font-weight:300;font-size:14px;line-height:1.55;background-color:transparent;margin:0;padding:16px;border-radius:0;overflow-x:auto;overflow-y:hidden;word-break:break-word;vertical-align:middle;white-space:pre-wrap;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre .copy{position:relative;display:block;float:right;font-size:18px;line-height:normal;color:#fff;margin:0 0 0 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0;-webkit-transition:opacity .4s;-o-transition:opacity .4s;transition:opacity .4s;will-change:opacity}pre .copy:hover{opacity:0}pre:hover .copy{opacity:1}pre[data-lang] .copy{position:absolute;top:0;right:0;margin:6px 0 0;text-indent:-16px}pre .copy>span{vertical-align:middle}pre.primary:not([data-lang]){border-color:#454fff!important}pre.secondary:not([data-lang]){border-color:#f50057!important}pre.primary[data-lang]{background-color:#454fff!important;color:#fff!important}pre.secondary[data-lang]{background-color:#f50057!important;color:#fff!important}pre.primary[data-lang] code{color:#fff!important}pre.secondary[data-lang] code{color:#fff!important}pre.primary[data-lang]:before{color:#fff!important}pre.secondary[data-lang]:before{color:#fff!important}pre::-webkit-scrollbar{height:8px;width:8px}pre::-webkit-scrollbar-thumb{background:#c1c1c1}pre::-webkit-scrollbar-thumb:active{background:#a4a4a4}

• ثم اضغط حفظ 
• بعدها ابحث عن <body/>
• ضع الكود الاتي فوقه

<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/> <script> $('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/>");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)}) </script> <script type='text/javascript'> var pres = document.getElementsByTagName("pre"); for (var i = 0; i < pres.length; i++) { pres[i].addEventListener("dblclick", function () { var selection = getSelection(); var range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }, false); } </script>

• لوضع الاكواد داخل الموضيع ضعها في هذا الكود

<code><pre> .......ضع الكود هنااا...... </code></pre>  

1. التدوينة التالية
2. التدوينة السابقة