اضافه مربع الأكواد البرمجية داخل مقالات بلوجر بشكل احترافي

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

المربع بيحتوي على ميزات رائعة زي: زر نسخ فوري، زر لمعاينة الكود في صفحة منفصلة، اسم الكود أعلى المربع، وتصميم عصري بلون رمادي فاتح متناسق مع مختلف الأذواق. كل ده بدون الحاجة لأي تعديلات يدوية أو أكواد معقدة.

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

ما هو مربع عرض الأكواد البرمجية؟

هو عبارة عن مكون يتم إضافته داخل مقالات بلوجر لعرض الأكواد بشكل منسق، مع أزرار وظيفية مثل:

زر نسخ الكود بضغطة واحدة.
زر معاينة الكود داخل صفحة جديدة.
اسم نوع الكود الظاهر أعلى المربع.
تصميم أنيق بخلفية رمادية فاتحة يتماشى مع كافة القوالب.
دعم أيقونات Feather Icons الخفيفة والجميلة.

لماذا تحتاجه في مدونتك؟

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

طريقة تركيب مربع الأكواد في بلوجر

أولًا: أضف هذا الكود داخل <head> في القالب:

js Code

<script src="https://unpkg.com/feather-icons"></script>
<script>
  feather.replace();
</script>

ثانيًا: استخدم هذا الكود داخل أي مقالة لعرض اي كود داخل المقالات:

HTML Code

<div class="eltiqni-box">
  <div class="eltiqni-header">
    <span>HTML Code</span>
    <div class="eltiqni-actions">
      <button class="btn-preview" title="معاينة الكود">
        <i data-feather="eye"></i>
      </button>
      <button class="btn-copy" title="نسخ الكود">
        <i data-feather="copy"></i>
      </button>
      <button class="btn-download" title="تحميل الكود">
        <i data-feather="download"></i>
      </button>
    </div>
  </div>
  <pre>&lt;div class="test"&gt;
  Hello World!
&lt;/div&gt;
  </pre>
</div>

ثالثاً: الصق الكود التالي أعلى وسم </body>

js Code

<script>
document.addEventListener(&#39;DOMContentLoaded&#39;, function () {
  document.querySelectorAll(&#39;.eltiqni-box&#39;).forEach(box =&gt; {
    const pre = box.querySelector(&#39;pre&#39;);
    const code = pre.innerText;

    box.querySelector(&#39;.btn-copy&#39;).onclick = () =&gt; {
      navigator.clipboard.writeText(code);
      alert(&quot;تم نسخ الكود!&quot;);
    };
    box.querySelector(&#39;.btn-download&#39;).onclick = () =&gt; {
      const blob = new Blob([code], { type: &quot;text/plain&quot; });
      const url = URL.createObjectURL(blob);
      const a = document.createElement(&quot;a&quot;);
      a.href = url;
      a.download = &quot;code.txt&quot;;
      a.click();
      URL.revokeObjectURL(url);
    };
    box.querySelector(&#39;.btn-preview&#39;).onclick = () =&gt; {
      const win = window.open();
      win.document.write(code);
      win.document.close();
    };
  });
});
</script>

رابعاً: الصق أيضا الكود التالي أعلى وسم ]]></b:skin>

css Code

/* صندوق الأكواد من التقني للمعلوميات */
.eltiqni-box {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 12px;
  margin: 1.5em 0;
  position: relative;
  padding-top: 3.2em;
  overflow: hidden;
  font-family: monospace;
}
.eltiqni-box .eltiqni-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #eee;
  border-bottom: 1px solid #ddd;
  padding: 0.7em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.eltiqni-box .eltiqni-header span {
  font-weight: bold;
  color: #333;
}

خلاصة

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

لو عندك أي استفسار أو واجهت صعوبة في التركيب، اكتبلي في التعليقات وسأساعدك فورًا.