في هذا المقال، سنستعرض طريقة ذكية لإضافة عدة أزرار تحميل داخل نفس المقال، بحيث يبدأ عداد تنازلي عند الضغط، وبعد انتهائه ينتقل الزائر مباشرة إلى رابط التحميل. هذه الطريقة تعمل بدون أي تعديل على قالب بلوجر وتناسب من يستخدم المحرر العادي.
فكرة كود عرض الأزرار
الكود يُستخدم لإضافة عدة أزرار تحميل داخل مقال واحد، كل زر مرتبط بعداد تنازلي خاص به، وبعد انتهاء العداد يتم تفعيل الزر ليبدأ تحميل الرابط المرتبط به.
✅ مميزات الطريقة:
-
تدعم أكثر من زر تحميل في نفس المقال بدون أي تعارض.
-
العداد يبدأ فقط بعد الضغط على الزر، وليس تلقائيًا.
-
يمكن تخصيص كل زر برابط مختلف وعبارة مخصصة.
-
حماية من التحايل: لا يمكن تشغيل أكثر من عداد في نفس الوقت.
-
مناسبة لتحميل ملفات متعددة في مقالة واحدة (مثل ملفات APK أو أدوات أو ملفات مضغوطة).
-
لا حاجة لتعديل قالب بلوجر أو ملفات HTML.
📌 أين يمكن وضع أزرار التحميل؟
يمكنك وضع أزرار التحميل في أي مكان داخل المقال، سواء في بدايته، أو منتصفه، أو نهايته، وذلك عن طريق تكرار هذا العنصر:
<div class="download-box" data-link="رابط_التحميل_هنا"></div>كل زر يعمل بشكل منفصل، ويبدأ عدادًا تنازليًا خاصًا به بمجرد الضغط عليه، دون تعارض مع باقي الأزرار.
هذا يتيح لك تنسيق المقال بحرية تامة، مثلاً:
- زر لتحميل الملف الرئيسي في بداية المقال
- زر لأداة مساعدة في منتصف الشرح
- زر لتحميل جميع الملفات دفعة واحدة في نهاية المقال
📝 شرح الكود:
-
الجزء العلوي يحتوي على عناوين وروابط التحميل التي يمكن تغييرها بسهولة.
-
كل
<div class="download-box">يحتوي على رابط تحميل داخل خاصيةdata-link. -
الزر يتم إنشاؤه تلقائيًا داخل كل
download-box. -
عند الضغط على الزر، يبدأ عداد تنازلي (30 ثانية).
-
بعد انتهاء العداد، يتم تفعيل الزر للضغط مرة ثانية للانتقال إلى رابط التحميل.
✏️ عناصر قابلة للتعديل:
ضع بيان التحميل الأول هنا← يمكن تغييرها لتكون مثل: "تحميل تطبيق كذا – إصدار 1".-
data-link="ضع رابط التحميل الأول هنا"← ضع هنا رابط الملف الحقيقي (رابط مباشر أو صفحة). -
const countdownTime = 30← يمكن تغيير الرقم لتعديل وقت الانتظار (مثلًا 10 أو 20 ثانية). -
نص الزر:
ابدأ التحميل← يمكن تغييره حسب الرغبة ←"أنقر هنا للتحميل - أكبس هنا" -
لون الزر:
backgroundColor = "#4CAF50"← يمكن تعديله لتناسب ألوان مدونتك.
💡 ملحوظات مهمة:
- يجب لصق الكود في وضع "HTML" وليس في "وضع الإنشاء"، لأن بعض التنسيقات لا تظهر بشكل صحيح في وضع الإنشاء.
- تأكد من أن روابط التحميل تبدأ بـ
https://لتفادي مشاكل إعادة التوجيه أو الحظر من المتصفح. - يفضل أن تكون روابط التحميل مباشرة أو من صفحات خالية من الإعلانات المزعجة.
- لا تضف عددًا كبيرًا من الأزرار في المقال نفسه لتجنب تشتيت القارئ.
- يمكنك تغيير ترتيب الأزرار كما تحب، فكل زر يعمل بشكل مستقل تمامًا.
- اختبر المقال بعد النشر على الهاتف والكمبيوتر للتأكد من أن الأزرار تعمل بشكل سليم.
📁 تحميل الكود كملف
لتحميل الكود داخل ملف .txt مباشر:
انقر هنا للتحميل من موقع ميديا فاير:
أنقر هنا للتحميل من موقع ميجا:
رابط مدونة تكنوبلدى:
فيديو الشرح
تعليقات
إرسال تعليق