طريقة إضافة أكواد البرمجة داخل إطار متميز مع خاصية التحديد

طريقة إضافة أكواد البرمجة داخل إطار متميز

السلام عليكم ورحمة من الله تعالى وبركاته

اضافة أكواد HTML ، CSS  ، PHP ... بالنسبة للمدونات التعليمية شيء مهم و بالخصوص في مجال تطوير المواقع و المدونات .
و نحن في مرحلة تطوير المدونات و تقديم الجديد ، لا بد من جعل هذه المدونة تؤول نحو الأفضل لذلك من الضروري اضافة الأفضل ، كيف ذلك ? فقط تابعنا .
في هذه التدوينة أقدم لكم طريقة إضافة أكواد البرمجة داخل إطار إحترافي مع خاصية " التحديد - Select" . يمكنكم هذا الكود من جعل أكواد التي تضيفها الى المدونة أكثر وضوحا للزائر و سهلة النسخ و الإضافة دون الوقوع في أخطاء ، بحيث تتوفر هذه الإضافة على خاصية تحديد الكامل للكود مما يجعل نسخه شيءا سهلا .


  • أول عملية نتوجه الى قالب ===> تحرير HTML  ==>  ثم نبحث عن ]]></b:skin>
  • نضيع الكود التالي فوق     ]]></b:skin>
.pre-header  {
margin-top: 10px;
}
.post pre, .pre-code {
background-color: #F4F4F4;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #F4F4F4), color-stop(50%, #E7E7E7));
background-image: -webkit-linear-gradient(#F4F4F4 50%,#E7E7E7 50%);
background-image: -moz-linear-gradient(#f4f4f4 50%,#e7e7e7 50%);
background-image: -o-linear-gradient(#f4f4f4 50%,#e7e7e7 50%);
background-image: linear-gradient(#F4F4F4 50%,#E7E7E7 50%);
-moz-background-size: 38px 38px;
background-size: 38px 38px;
border: 1px solid #C7C7C7;
display: block;
line-height: 19px;
margin-top: 0;
margin-bottom: 10px;
overflow-y: hidden;
padding: 0 0 0 4px;
word-wrap: break-word;
font-size: 11px;
max-height: 21em;
overflow: auto;
width: 100%;
height: 200px;
box-sizing: border-box;
}
.pre-code {
display: none;
}
.pre-header .close {
display: none;
}
.post-content {
font-size: 13px;
}


  •  نبحث مرة أخرى عن الوسم </head>
  • نضيف الكود التالي فوقه مباشرة 

 <script type="text/javascript" src="http://yourjavascript.com/1272145830/code.js"></script>

  • ثم نضغط على حفظ .
  • عندما تريد اضافة كود على المدونة تضيفه على الشكل التالي مع تغيير المطلوب 
<pre id="pre-0">

ضع هنا الكود

</pre>


  • مبروك عليك ، لا تنسوا وضع أرائكم و استفساراتكم و شكرا .

مقالات ذات صلة

Previous
Next Post »

المروجوا احترام سياسة المدونة و عمل بها و شكرا ااا