طريقة عمل زر عداد تحميل تنازلى احترافي لمدونة بلوجر

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

✅ مميزات الزر:

• يمنع التحميل المباشر ويزيد من مدة بقاء الزائر.

• تصميم جذاب ومتجاوب مع الشاشات.

• إمكانية تعديل الوقت والكلمات المعروضة.

• سهل التركيب ولا يتطلب تعديل القالب أو رفع ملفات خارجية.

• يعمل على جميع قوالب بلوجر الحديثة.

⚙️ الكود المستخدم

يتكون الزر من ثلاثة أجزاء:

1. كود CSS: لتصميم الزر وشكله.

2. كود HTML: لوضع الزر داخل المقال.

3. كود JavaScript: للتحكم في العداد الزمني والتحميل التلقائي.

يمكنك العثور على الكود كاملًا في نهاية المقال.

📝 شرح الكود

1. كود CSS

هذا الجزء مسؤول عن تصميم الزر، من حيث اللون والحجم والرمز الموجود بداخله. يمكنك تعديل الألوان من خلال خاصية background وcolor.

2. كود HTML

وهو الجزء الذي يظهر الزر داخل المقال، ويحتوي على الأيقونة والنص. لا تنسَ وضع الكود داخل "وضع HTML" عند إضافته للمقال.

3. كود JavaScript

هذا الكود هو المسؤول عن تنفيذ العداد التنازلي، وبعد انتهاء الوقت يتم توجيه الزائر إلى رابط التحميل تلقائيًا.

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

1. أنقر هنا للتحميل ← يمكن تغييره إلى أنقر هنا للأنتقال - أكبس الزر - يرجى النقر هنا. 
2. رابط التحميل داخل الكود ← استبدل "ضع رابط التحميل هنا" برابط التحميل الفعلي في كل مرة تستخدم فيها الزر. 
3. "يرجى الأنتظار" ← يمكن تغيير النص المكتوب في الزر أثناء عمل العداد إلى أي عبارة أخرى مثل: "سيتم الانتقال بك إلى رابط التحميل - جاري تجهيز الرابط" . 
4.  "جارى الانتقال الى رابط التحميل... " ←يمكن تغيير النص فى الزر بعد انتهاء العداد الى اى عبارة اخرى مثل: "سيتم الانتقال الآن" .
5. مدة العداد (مثلًا 10 ثوانٍ) ← يمكن تعديلها بسهولة بتغيير الرقم داخل الكود في السطر: