طريقة إضافة أزرار متعددة لعرض أكواد (Code Buttons) في مقال بلوجر بسهولة

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

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

💡 فكرة عمل الكود

الكود يعتمد على مبدأ بسيط: عند الضغط على الزر، يبدأ عدّاد تنازلي (مثلاً 30 ثانية)، وخلال هذه الفترة يتم تعطيل الزر لعدم الضغط المتكرر. بعد انتهاء العدّاد، تظهر الأكواد التي كانت مخفية.

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

🪄 خطوات التنفيذ على بلوجر

1. افتح بلوجر > المشاركات > مشاركة جديدة.
2. حوّل إلى وضع HTML (وليس الإنشاء).
3. انسخ الكود الكامل الموجود أسفل المقال والصقه في المكان الذي تريده داخل المقال.
4. يمكنك تكرار الجزء الخاص بالزر أكثر من مرة داخل نفس المقال — فقط انسخ الكتلة التي تبدأ بـ <div class="code-block"> وانتهت بـ </div>.
5. ارجع إلى وضع الإنشاء لمعاينة النتيجة.

🧩 مميزات الكود

• ✅ يمكن تكرار الزر لأي عدد من التطبيقات أو الخدمات.
• ⏳ يحتوي على عدّاد تنازلي (30 ثانية قابلة للتعديل).
• 🎯 يمنع النسخ السريع أو الوصول الفوري للمحتوى الحساس.
• 🛠️ لا يحتاج أي تعديلات على قالب بلوجر أو ملفات خارجية.
• 📱 متجاوب ويعمل على جميع الأجهزة (كمبيوتر – موبايل – تابلت).
• 🎨 تصميم بسيط وأنيق يمكنك تعديله كما تريد.

✏️ عناصر قابلة للتعديل

💻 تحميل الكود المستخدم 

🧠 شرح الكود

1️⃣ الجزء الأول (HTML): يحتوي على الزر، النصوص، ومساحة الأكواد المخفية داخل <div class="prime-codes"> والتي لا تظهر إلا بعد انتهاء العدّاد.

2️⃣ الجزء الثاني (CSS inline): تم وضع تنسيقات بسيطة مباشرة داخل الوسوم لتسهيل التعديل من داخل المقال نفسه دون الحاجة إلى ملفات خارجية.

3️⃣ الجزء الثالث (JavaScript): هو المسؤول عن تنفيذ العدّاد وإظهار الأكواد. عند الضغط على الزر:

• يتم تعطيل الزر مؤقتًا لتجنب النقر المتكرر.
• يبدأ العدّاد بالعد التنازلي.
• بعد انتهاء الوقت، تُعرض الأكواد ويختفي العدّاد.

📋 ملاحظات هامة:

• يمكنك تغيير التصميم والألوان بحرية من داخل الأكواد نفسها.
• يفضّل اختبار الكود أولاً في مسودة قبل نشره في المقال النهائي.
• لإضافة أكثر من زر في نفس المقال، انسخ الكتلة كاملة وغيّر اسم التطبيق فقط.
• يمكنك استخدام الكود نفسه لعرض روابط تحميل، أكواد تفعيل، أو أي بيانات تريد حمايتها مؤقتًا.

🎯 الخلاصة:

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