تعديل المشاركة

إضافة صندوق لعرض الاكواد داخل مواضيع بلوجر

إضافة صندوق لعرض الاكواد داخل مواضيع بلوجر

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


 طريقة التركيب صندق الاكواد


قم بتسجيل بحسابك ثم الذهاب إلى منصة بلوجر من هنا.

إنتقل إلى المدونة،ثم إلى القالب،ثم إضغط على تحرير edit html.

إضغط في وسط محرر الأكواد ثم ctrl + f لأظهار مربع البحث.

بإستعمال زر ctrl + c للنسخ و ctrl + v للصق.

قم بالبحث على وسم

]]></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}


ابحث باستخدام Ctrl + F عن الوسم 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>

ومبروك عليك الأضافة