إضافة صندوق تحميل أنيق مع عداد تنازلي لمدونات بلوجر

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

لماذا تحتاج إلى صندوق تحميل مع عداد تنازلي في بلوجر؟

قبل الغوص في التفاصيل التقنية، دعونا نستعرض الفوائد الرئيسية لهذه الأداة:

1. تحسين تجربة المستخدم (UX):
   • يمنح الزائرين وضوحًا في عملية التحميل، حيث يعرفون المدة المتبقية قبل بدء التنزيل.
   • يقلل من الارتباك الناتج عن الانتقال لصفحات خارجية.
2. زيادة التفاعل:
   • العد التنازلي يُشعر الزائر بالإثارة ويحفزه على الانتظار بدلاً من مغادرة الصفحة.
3. الحفاظ على الزوار داخل المدونة:
   • تجنب إعادة التوجيه لمواقع أخرى يحسّن معدل الارتداد (Bounce Rate) ويعزز SEO.
4. تخصيص مظهر الصندوق:
   • يمكنك تعديل الألوان، الخطوط، وحتى إضافة أيقونات لتناسب هوية مدونتك.

معاينة كيف يظهر شكل صندوق التحميل بلوجر

معاينة حية

كيف يعمل صندوق التحميل مع العداد في بلوجر؟

يعتمد هذا الصندوق على تقنيات CSS - HTML وجافا سكريبت لتنفيذ المهام التالية:

• عرض معلومات الملف (مثل الاسم، الحجم، النوع).
• بدء عد تنازلي عند النقر على زر التحميل.
• توجيه المستخدم إلى رابط التحميل بعد انتهاء العداد.
• دعم الوضع المظلم إذا كان قالبك يحتوي على هذه الميزة.

خطوات إضافة صندوق التحميل إلى مدونة بلوجر

التحضير الأولي: إنشاء نسخة احتياطية

قبل إجراء أي تعديلات، يُنصح دائمًا بـ حفظ نسخة احتياطية من القالب:

1. انتقل إلى لوحة تحكم بلوجر.
2. اختر "القالب" من القائمة الجانبية.
3. انقر على "نسخ احتياطي" ثم "تنزيل".

إضافة كود CSS لتنسيق صندوق التحميل

1. من لوحة تحكم بلوجر، انتقل إلى "القالب" → "تعديل HTML".
2. ابحث عن الوسم ]]></b:skin> وألصق الكود التالي فوقه مباشرة:

/* Countdown Download Box By Echrah.Net */
.dldCo{
  --boxC : #08102b; /* لون الخط */
  --boxBg : #fffdfc; /* خلفية الحاوية */
  --fontF : inherit; /* إسم الخط */
  --svgS : #fffdfc; /* أيقونة SVG */
  --btnBg : #482dff; /* خلفية الزر */
  --darkC : #fffdfc; /* لون الخط (الوضع المظلم) */
  --darkBt : #e91e63; /* خلفية الزر (الوضع المظلم) */
  --darkBa: #2d2d30; /* خلفية داكنة Alt */
  --darkBs: #252526 ; /* خلفية مظلمة ثانية */
}

.dldCo{-webkit-tap-highlight-color:transparent;position:relative;width:100%;max-width:480px;margin:30px 0;color:var(--boxC);font-family:var(--fontF);transition:margin .6s ease;-webkit-transition:margin .6s ease}
.dldBx{position:relative;z-index:2;background:var(--boxBg);width:100%;padding:15px;display:flex;flex-direction:column;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.dldTp{display:flex;flex-direction:row} 
.dldIm{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:rgba(0,0,0,.08);border-radius:6px;transition:all .4s ease;-webkit-transition:all .4s ease} 
.dldIm::before{content:attr(data-text);opacity:.7} 
.dldIm[style]:not([style='']){width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)} 
.dldIm[style]:not([style=''])::before{display:none}
.dldSv{opacity:0;position:absolute;width:calc(100% + 12px);height:calc(100% + 12px);top:-6px;bottom:-6px;right:-6px;left:-6px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;transition:all .5s ease;-webkit-transition:all .5s ease} 
.dldIm[style]:not([style='']) .dldSv{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px} 
.dldSv .b{fill:none;stroke:#e6e6e6;opacity:.9} 
.dldSv .c{fill:none;stroke:var(--btnBg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:all .5s ease;-webkit-transition:all .5s ease}
.dldIn{flex-grow:1;width:calc(100% - 115px)} 
.dldIn >*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} 
.dldIn >*::before{content:attr(data-text) ': ';opacity:.8}
.dldBt{background:var(--btnBg);position:absolute;width:40px;height:40px;bottom:-20px;right:20px;outline:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:all .3s ease;-webkit-transition:all .3s ease;cursor:pointer} 
.dldBt:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} 
.dldBt svg{width:24px;height:24px;fill:none;stroke:var(--svgS);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} 
.dldBt.dldDl{visibility:visible;opacity:1} 
.dldBt.dldRt{visibility:hidden;opacity:0;bottom:-40px}
.dldSl{z-index:1;position:absolute;bottom:0;height:60px;width:100%;background:var(--boxBg);border-radius:0 0 10px 10px;transition:all .6s ease;-webkit-transition:all .6s ease} 
.dldMe{position: absolute;width:100%;height:40px;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px} 
.dldMe span{color:var(--btnBg);font-size:18px;font-weight:600;margin:0 5px}
.dldCo.dldAlt{margin:30px 0 70px} 
.dldCo.dldAlt .dldIm{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} 
.dldCo.dldAlt .dldSv{opacity:1} 
.dldCo.dldAlt .dldDl{visibility:hidden;opacity:0;bottom:-40px} 
.dldCo.dldRty .dldRt{visibility:visible;opacity:1;bottom:-20px} 
.dldCo.dldAlt .dldSl{bottom:-40px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.darkMode .dldCo{color:var(--darkC)} 
.darkMode .dldBx{background:var(--darkBs)} 
.darkMode .dldIm, .darkMode .dldSl{background:var(--darkBa)} 
.darkMode .dldSv .b{stroke:#404045} 
.darkMode .dldSv .c{stroke:var(--darkBt)} 
.darkMode .dldBt{background:var(--darkBt)} 
.darkMode .dldMe span{color:var(--darkBt)}

إضافة كود جافا سكريبت للعداد التنازلي

1. ابحث عن الوسم </body> في نهاية القالب.
2. ألصق الكود التالي فوقه مباشرة:

<script>
  /*<![CDATA[*/
  /* Countdown Download Script By Echrah.Net */
  function download(link, time, newtab, id){
    var dldCo = document.querySelector(id),
        dldMe = document.querySelector(id + ' .dldMe'),
        dldPg = document.querySelector(id + ' .dldPg'),
        dldDl = document.querySelector(id + ' .dldDl'),
        dldRt = document.querySelector(id + ' .dldRt'),
        dldLf = time;
    
    dldMe.innerHTML = 'سيتم بدئ التحميل خلال <span>' + dldLf + '</span> ثانية...';
    dldCo.classList.add('dldAlt');
    
    var downloadTimer = setInterval(function timeCount(){
        dldLf -= 1;
        dldMe.innerHTML = 'سيتم بدئ التحميل خلال <span>' + dldLf + '</span> ثانية...';
        dldPg.style.strokeDashoffset = Math.floor((dldLf / time) * 100);

      if(dldLf <= 0){
        clearInterval(downloadTimer);
        dldMe.innerHTML = 'الرجاء الإنتظار...';
        
        if (newtab == 'true'){
          window.open(link, '_blank');
        } else {
          window.location.href = link;
        };
        
        dldRt.onclick = function (){
          if (newtab == 'true'){
            window.open(link, '_blank');
          } else {
            window.location.href = link;
          }
        };
        
        setTimeout(() => {
          dldCo.classList.remove('dldAlt');
          dldCo.classList.add('dldRty');
        }, 4000);
      }
    }, 1000);
  };
  /*]]>*/
</script>

إضافة صندوق التحميل إلى التدوينة

1. عند إنشاء تدوينة جديدة، انتقل إلى وضع "تحرير HTML".
2. ألصق الكود التالي في المكان المرغوب:

<!--[ Countdown Download Box By Echrah.Net ]-->
<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.apk' style='background-image:url(رابط_الصورة_هنا)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='الإسم'>إسم الملف.ext</span>
        <span data-text='التصنيف'>نوع الملف</span>
        <span data-text='الحجم'>حجم الملف</span>
        <span data-text='المطور'>اسم المطور</span>
        <span data-text='الترخيص'>مجاني / مدفوع</span>
      </div>
    </div>
    <button onclick='download("رابط_التحميل", "10", "false", "#download1")' class='dldBt dldDl'><svg viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

تخصيص صندوق التحميل

1. تغيير الألوان

يمكنك تعديل ألوان الصندوق من خلال متغيرات CSS في الكود الأول:

• --boxBg: لون خلفية الصندوق.
• --btnBg: لون زر التحميل.
• --boxC: لون النصوص.

2. إضافة صورة للملف

استبدل رابط_الصورة_هنا في السطر التالي:

<div class='dldIm' data-text='.apk' style='background-image:url(رابط_الصورة_هنا)'>

3. ضبط مدة العد التنازلي

غير الرقم "10" في السطر التالي لضبط عدد الثواني:

<button onclick='download("رابط_التحميل", "10", "false", "#download1")'>

4. فتح الرابط في نافذة جديدة

إذا أردت فتح رابط التحميل في تبويب جديد، غيّر "false" إلى "true".

الخاتمة

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

الاسالة شائعة

1. هل يعمل هذا الكود مع جميع قوالب بلوجر؟

نعم، الكود متوافق مع معظم القوالب، لكن يُفضل اختباره أولاً.

2. كيف أضيف أكثر من صندوق تحميل في نفس الصفحة؟

غيّر id='download1' إلى id='download2' (وهكذا) لكل صندوق جديد.

3. هل يمكن تغيير شكل العداد؟

نعم، يمكنك تعديل ملف SVG داخل الكود أو استبداله بأيقونات أخرى.

هل لديك أي استفسارات؟ شاركنا رأيك في التعليقات، وسنكون سعداء بمساعدتك! 💬