مستر ابوعلى مستر ابوعلى
recent

آخر الأخبار

recent
random
جاري التحميل ...

صناديق لعرض أكوادك البرمجية بشكلين مختلفين مثل مدونة مستر أبو علي

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


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


.s-code::-webkit-scrollbar{height:10px} .s-code::-webkit-scrollbar-track{-webkit-border-radius:100px;border-radius:100px} .s-code::-webkit-scrollbar-thumb{background-color:#444;-webkit-border-radius:100px;border-radius:100px} .s-code.t-HTML::-webkit-scrollbar-thumb:hover{background-color:#2AA4DA} .s-code.t-CSS::-webkit-scrollbar-thumb:hover{background-color:#0A9E6A} .s-code.t-JAVASCRIPT::-webkit-scrollbar-thumb:hover{background-color:#B58A33} .s-code.t-CODE::-webkit-scrollbar-thumb:hover{background-color:#CCC} .s-code{background-color:#222;clear:both;display:block;direction:ltr;width:100%;-webkit-border-radius:3px;border-radius:3px;overflow:hidden} .s-code:hover{overflow-x:scroll} .t-code{display:table-cell;vertical-align:top;width:100%;margin:0;white-space:normal} .t-code code{display:block;color:#ccc;font-size:14px;font-family:monospace!important;height:30px;padding:7px 20px;white-space:nowrap} .t-code code:nth-of-type(odd){background-color:#151515} .l-code{display:table-cell;vertical-align:top;min-width:40px;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none} .l-code em{display:block;font-style:normal;color:#fff;text-align:center;font-family:sans-serif!important;height:30px;line-height:1;padding-top:7px} .l-code em:nth-of-type(odd){background-color:rgba(255,255,255,0.1)} .s-code:before{display:table-caption;width:100%;padding:0 20px;font-family:monospace;font-size:24px;height:50px;padding-top:10px;font-weight:700} .t-HTML .l-code{background-color:#2AA4DA} .t-CSS .l-code{background-color:#0A9E6A} .t-JAVASCRIPT .l-code{background-color:#B58A33} .t-CODE .l-code{background-color:#444} .s-code.t-HTML:before{content:"< HTML >";border-bottom:2px solid #2AA4DA;color:#2AA4DA} .s-code.t-CSS:before{content:"< CSS >";border-bottom:2px solid #0A9E6A;color:#0A9E6A} .s-code.t-JAVASCRIPT:before{content:"< JAVASCRIPT >";border-bottom:2px solid #B58A33;color:#B58A33} .s-code.t-CODE:before{content:"< CODE >";border-bottom:2px solid #999;color:#999} .t-code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الكود التالي فوقة.

<script type='text/javascript'>/*<![CDATA[*/ $(".acor-title")["click"](function() { $(this)["addClass"]("acor-title-active")["siblings"](".acor-title")["removeClass"]("acor-title-active"); $(this)["siblings"](".acor-content")["removeClass"]("acor-active"); $(this)["next"]("div")["addClass"]("acor-active"); }); $(".s-code")["each"](function() { var _0x6717x3 = ""; for(var _0x6717x4 = 1; _0x6717x4 < $(this)["find"](".t-code code")["length"] + 1; _0x6717x4++) { _0x6717x3 += "<em>" + _0x6717x4 + "</em>" }; $(this)["prepend"]("<div class=\'l-code\'>" + _0x6717x3 + "</div>");}); /*]]>*/</script>




والأن مع الجزء الأخير وهو كيفية أستخدام صناديق عرض الاكواد البرمجية في تدويناتك ،ولكي نسهل عليك الأمر أكثر وأكثر قمنا بتصم أداة لتوليد الأكواد أي ان كل ماعليك هو أن تضع أكوادك في هذه الأداة ثم أختيار لغة الأكواد ثم الضغط علي توليد الكود ، قم تقوم بنسخ الأكواد بعد توليدها وتضع في التدوينة وتأكد من الأكواد موجودة في خانة HTML ، وهذه صورة لاداة توليد الأكواد .

ملحوظة مهمة وهي أن هذه الأداة تقوم بتوليد الأكواد للشكل الأول فقط والشكل الثاني له أداة خاصة به.

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

pre{margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#120e28;position:relative;padding:55px 15px 10px 15px;width:100%;tab-size:2;word-break:normal;-webkit-user-select:text;max-height:400px;color:#fff}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#EEEEEE;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2),inset 0 0 0 1px #ccc}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px;line-height:25px;height:46px;background-color:#EEEEEE;box-shadow:inset 0 0 0 1px #ccc}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;left:0;padding:9px 14px;position:absolute;line-height:28px}
pre code{display:block;background:none;border:none;color:#FFFFFF;padding:25px 20px 20px 20px;font-size:16px;white-space:pre;overflow:auto;text-align:right}
.post blockquote,.post pre,.post code{-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-ms-user-select:text;-moz-user-select:text}
.comment_emo_list span{-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-ms-user-select:text;-moz-user-select:text}
ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الكود التالي فوقة.


<script type='text/javascript'>//<![CDATA[
for(var pres=document.getElementsByTagName("pre"),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 ، وهذه صورة لاداة توليد الأكواد .

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

عن الكاتب

أحمد شحاتة

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

مستر ابوعلى