طريقة عمل صندوق الاكواد في مدونة بلوجر بشكل متميز

صندوق الأكواد يسمح للزائر بنسخ الأكواد بشكل صحيح بدون حدوث أخطاء

هذا الكود هو نمط CSS مخصص لإنشاء عناصر <pre> بتصميمات مختلفة لعرض الأكواد البرمجية (مثل HTML، CSS، JavaScript، jQuery) بشكل منظم وجذاب. بالإضافة إلى ذلك، يحتوي الكود على تصميمات لعرض أزرار (Buttons) وعناصر أخرى. سأشرح الكود بالتفصيل:

تصميم العنصر <pre> لعرض الأكواد:

العنصر <pre> يستخدم لعرض النصوص أو الأكواد مع الحفاظ على التنسيق الأصلي (مثل المسافات والأسطر). الكود هنا يضيف تصميمات مختلفة لكل نوع من أنواع الأكواد (HTML، CSS، JavaScript، jQuery).

أجزاء الكود:

• .bm-dropcap: يستخدم لإنشاء حرف كبير (Drop Cap) في بداية النص. يمكن أن يكون دائريًا أو مربعًا أو بدون خلفية.
• pre: العنصر الرئيسي لعرض الأكواد. يحتوي على خلفية داكنة (#222) ونص فاتح (#fff).
• pre[data-codetype]: يحدد نوع الكود المعروض (مثل HTML، CSS، JavaScript). يتم تغيير لون الخلفية والنص بناءً على نوع الكود.
• pre[data-codetype]:before: يعرض اسم نوع الكود (مثل "HTML" أو "CSS") في شريط أعلى العنصر <pre>.

أمثلة:

• HTML: لون الشريط العلوي أزرق (#12acf5)، ولون النص أزرق فاتح (#2dbcff).
• CSS: لون الشريط العلوي بنفسجي (#9647de)، ولون النص بنفسجي فاتح (#cb88fd).
• JavaScript: لون الشريط العلوي أصفر (#d0ba1e)، ولون النص أصفر فاتح (#f3d927).
• JQuery: لون الشريط العلوي وردي (#e02ea9)، ولون النص وردي فاتح (#ff6bd1).

تصميم الأزرار (Buttons):

الكود يحتوي أيضًا على تصميمات للأزرار باستخدام الفئة .button.

أجزاء الكود:

• .button: تصميم عام للأزرار. يحتوي على خلفية رمادية داكنة (rgba(84,87,102,1))، نص أبيض، وحواف مدورة.
• input.button: تصميم مشابه للأزرار داخل عناصر <input>.

تفاصيل إضافية:

• أرقام الأسطر: يتم عرض أرقام الأسطر بجانب الكود باستخدام العنصر <span class="line-number">. يتم تلوينها وتنسيقها بشكل منفصل.
• التمرير (Scrollbar): يتم تخصيص لون شريط التمرير بناءً على نوع الكود (مثل أزرق لـ HTML، بنفسجي لـ CSS، إلخ).

كيفية استخدام الكود:

• 
  لعرض كود HTML:

  
  <pre data-codetype="HTML">
    <!-- Your HTML Code Here -->
  </pre>
        

• 
  لعرض كود CSS:

  
  <pre data-codetype="CSS">
    /* Your CSS Code Here */
  </pre>
        

• 
  لعرض كود JavaScript:

  
  <pre data-codetype="JavaScript">
    // Your JavaScript Code Here
  </pre>
        

• 
  لعرض كود jQuery:

  
  <pre data-codetype="JQuery">
    // Your jQuery Code Here
  </pre>
        

• 
  لعرض كود COPY AREA:

  
  <pre data-codetype="COPY AREA">
    // Your jQuery Code Here
  </pre>
        

فوائد الكود:

• تنظيم الأكواد: يعرض الأكواد بشكل منظم مع أرقام الأسطر.
• تصميم جذاب: يستخدم ألوانًا مختلفة لكل نوع من أنواع الأكواد.
• سهولة الاستخدام: يمكن إضافة أي كود بسهولة عن طريق تغيير السمة data-codetype.

تحسينات مقترحة:

• إضافة دعم لعرض أكواد بلغات أخرى (مثل Python، PHP).
• جعل التصميم متجاوبًا (Responsive) ليعمل بشكل جيد على الأجهزة المحمولة.
• إضافة إمكانية نسخ الكود بنقرة زر.

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

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

1. قم بالدخول إلى مدونة بلوجر.
2. من القائمة انقر فوق المظهر ثم تعديل HTML.
3. ابحث عن هذا الوسم باستخدام Ctrl+F عن ]]></b:skin>.
4. قم بوضع هذا الكود فوقه مباشرةً كما هو موضح بالصورة أسفل الكود.
5. قم بحفظ القالب.

الكود كامــلا

<style>

  .bm-dropcap{float:right;display:block;font-size:50px;line-height:50px;background-color:$(maincolor);color:white;text-align:center;margin:9px 0 0 13px;padding:2px 13px 5px 13px;font-family:Verdana,Geneva,sans-serif;text-transform:uppercase;}
  .bm-dropcap.dcap2{webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%}
  .bm-dropcap.dcap3{background:none;font-weight:900;font-size:75px;line-height:65px}
  pre {background-color: #222;color: #333;position: relative;padding: 0 7px;margin: 15px 0 10px;overflow: hidden;overflow-x: visible;word-wrap: normal;white-space: pre;position: relative;}
  pre[data-codetype]{padding:37px 1em 5px;text-align: left;direction: ltr;}
  pre[data-codetype]:before {content: attr(data-codetype);display: block;position: absolute;top: -5px;right: 0;left: 0;background-color: #F1F1F1;padding: 7px;color: #FFFFFF;-webkit-box-shadow: rgba(0,0,0,0.117647) 0 1px 3px;-moz-box-shadow: rgba(0,0,0,0.117647) 0 1px 3px;box-shadow: rgba(0,0,0,0.117647) 0 1px 3px;}
  pre .line-number span:nth-child(even) {background-color: rgba(0, 0, 0, 0.6);}
  pre code,pre .line-number{display:block;color:#fff}
  pre .line-number{color:#fff;min-width:1em}
  pre .line-number span{display:block}
  pre .cl{display:block;clear:both}
  pre .line-number{float:left;margin:0 1em 0 -1em;border-right:2px solid #666666 ;text-align:left}
  pre .line-number span{padding:0 1em 0 .8em}
  pre[data-codetype="HTML"]:before {background-color: #12acf5;}
  pre[data-codetype="HTML"] {color: #2dbcff;}
  pre[data-codetype="HTML"] span.line-number {border-right: 2px solid #2dbcff;}
  pre[data-codetype="CSS"] {color: #cb88fd;}
  pre[data-codetype="CSS"] span.line-number {border-right: 2px solid #9647de;}
  pre[data-codetype="CSS"]:before {background-color: #9647de;}
  pre[data-codetype="COPY AREA"] {color: #FFFDFC;}
  pre[data-codetype="COPY AREA"] span.line-number {border-right: 2px solid #de5147;}
  pre[data-codetype="COPY AREA"]:before {background-color: #de5147;}
  pre[data-codetype="JavaScript"]:before {background-color: #d0ba1e;}
  pre[data-codetype="JavaScript"] {color: #f3d927;}
  pre[data-codetype="JavaScript"] span.line-number {border-right: 2px solid #d0ba1e;}
  pre[data-codetype="JQuery"]:before {background-color: #e02ea9;}
  pre[data-codetype="JQuery"] {color: #ff6bd1;}
  pre[data-codetype="JQuery"] span.line-number {border-right: 2px solid #e02ea9;}
  pre[data-codetype="HTML"]::-webkit-scrollbar-thumb {background: #2dbcff;}
  pre[data-codetype="CSS"]::-webkit-scrollbar-thumb {background: #9647de;}
  pre[data-codetype="COPY AREA"]::-webkit-scrollbar-thumb {background: #9647de;}
  pre[data-codetype="JavaScript"]::-webkit-scrollbar-thumb {background: #d0ba1e;}
  pre[data-codetype="JQuery"]::-webkit-scrollbar-thumb {background: #e02ea9;}
  .button,input.button{position:relative;display:inline-block;margin-left:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer}

</style>

<pre data-codetype="HTML">You HTML Code Here</pre>
 
 

<pre data-codetype="CSS">You CSS Code Here</pre>

 
 
<pre data-codetype="JavaScript">You JavaScript Code Here</pre>

 
 
<pre data-codetype="JQuery">You JQuery Code Here</pre>


قم بكتابة النص بدلاً من 
You Text Here


<pre data-codetype="COPY AREA">gggggggggggggggg</pre>
    

(احتفظ بنسخة من قالب المدونة قبل إضافة الكود تفاديًا لأي خطأ).