بسم الله الرحمن الرحيم حبيت في هذا الموضوع وبعد طلب من بعض الاخوه عن طريقة وضع الاكواد في اقتباس او صندوق ملون وحسب نوع الكود اذا كان css او html قررت ان اضع موضوع عن هذا الاضافة الرائعة التي تستطيع ان تضع الاكواد في داخل الصندوق حسب نوع الكود الذي تريد ان تضيفه وهذا الموضوع يفيد اصحاب المواقع الذين يقدمون مواضيع تخص مجال بلوجر ويضيف لمسة من الجمال للموضوع
طريقة اضافة الاقتباس او الصندوق لمدونتك
1- من لوحة التحكم >> قالب >> تحرير HTML
2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- قم بالاستعانة بلوحة التحكم (CTRL+F) من اجل البحث عن هذا الكود
]]></b:skin>
4-واضف فوقه مباشراً الكود التالي
/*-----------css code box-num-------------*/
pre {text-align: right;background-color:#233948;font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:#333;border:1px solid #f1c40f;position:relative;padding:0 7px;margin:10px 0;overflow:auto;word-wrap:normal;white-space:pre;box-shadow:0 1px 2px rgba(0,0,0,0.2);position:relative;}
pre[data-codetype] {padding: 37px 0em 5px 1em;}
pre[data-codetype]:before {content:attr(data-codetype);display:block;position:absolute;top:0;right:0;left:0;background-color:#95a5a6;padding:8px;font:bold 12px/20px Arial,Sans-Serif;color:white;}
pre[data-codetype="HTML"] {border-color:#34495e;color:#889CAF;}
pre[data-codetype="CSS"] {border-color:#16a085;color:#7DDECA;}
pre[data-codetype="JavaScript"] {border-color:#2980b9;color:#91C8ED;}
pre[data-codetype="JQuery"] {border-color:#34495e;color:#889CAF;}
pre[data-codetype="HTML"]:before {background-color:#34495e;}
pre[data-codetype="CSS"]:before {background-color:#16a085;}
pre[data-codetype="JavaScript"]:before {background-color:#2980b9;}
pre[data-codetype="JQuery"]:before {background-color:#34495e;}
pre code,
pre .line-number {display:block;font:normal normal 12px/15px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;color:#006699;}
pre .line-number {float: right;margin: 0px 0em 0 1em;color: #ecf0f1;background: #162B38;border-left: 2px solid #3E5770;text-align: right;padding: 0;min-width: 2.5em;}
pre .line-number span {display:block;padding:0 .5em 0 1em;}
pre .line-number span:nth-child(even) {}
pre .cl {display:block;clear:both;}
5- نبحث عن الكود </body>
ونضيف فوقه مباشرأ الكود التالي
<script src='https://ayana-tech1.googlecode.com/svn/trunk/codebox-number-left.js'/>
هذا الكود يعمل علي اضهار الترقيم الجانبي اذا لم ترد الترقيم لاتقم باضافته
والان قم بالضغط على حفظ القالب وعندما تريد اضافة الاقتباس او الصندوق تضع الصفحة html ثم تضيف احد الاكواد التالي حسب نوع الكود الذي تريد ان تضيفه اذا كان css او html الى اخره وثم تضغط على تأليف هذا الامر ضروري يجب الضغط علي تأليف سوف تظهر لك كلمه ( ضع هنا الكود ) تضع بدلها الاكواد التي تريد اضافتها
الصندوق الخاص بلغه Html
الكود
<pre data-codetype="HTML">ضع هنا الكود</pre>
الصندوق الخاص بلغه CSS
الكود
<pre data-codetype="CSS">ضع هنا الكود</pre>
الصندوق الخاص بلغه JavaScript
الكود
<pre data-codetype="JavaScript">ضع هنا الكود</pre>
الصندوق الخاص بلغه JQuery (جي كيوري)
الكود
<pre data-codetype="JQuery">ضع هنا الكود</pre>
الان وصلنا الي نهايه الموضوع اذا اعجبك لاتنسي تعليقك
الاضافه من تصميمي الشخصي عند النقل اتمني ذكر المصدر
معلومات التدوينه !
