كيفية إنشاء صندوق تنزيل مع عداد تنازلي لمدونة بلوجر

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

لذا، اليوم أصبحنا قادرين على إنشاء حاوية تنزيل مع مؤقت تنازلي لموقع الويب blogger. عندما يقوم العملاء بالنقر فوق زر التنزيل، سيبدأ العد التنازلي قبل بدء التنزيل.

كيفية إنشاء صندوق تنزيل العد التنازلي؟

لن يتطلب إنشاء مربع تنزيل العد التنازلي لموقعك على Blogger الكثير من المعرفة بلغات HTML أو CSS أو JS لأنني صممته لك بالفعل. ما عليك فعله هو تنفيذ التعليمات البرمجية في المكان الصحيح في XML لقالب Blogger الخاص بك.

قبل أن نبدأ في إضافة الأكواد في XML، أنصحك بأخذ نسخة احتياطي من السمة الحالية لديك.بالصدفة، إذا حدثت أي مشكلة، يمكنك استعادتها لاحقًا

الخطوة 01: 

أولاً قم بتسجيل الدخول إلى حسابك 

لوحة تحكم Blogger.

الخطوة 02: في لوحة معلومات Blogger، انقر فوق "المظهر" .

الخطوة 03: انقر فوق الزر "تخصيص" بجوار. 

الخطوة 04: انقر فوق تحرير HTML وسيتم إعادة توجيهك إلى صفحة التحرير.

الخطوة 05: الآن ابحث عن الكود ]]></b:skin>وألصق أكواد CSS التالية فوقه مباشرة.

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

.dldCo{

  --boxC : #08102b; /* Font Color */

  --boxBg : #fffdfc; /* Container Background */

  --fontF : inherit; /* Font Family */

  --svgS : #fffdfc; /* Button SVG Stroke */

  --btnBg : #482dff; /* Button Background */

  --darkC : #fffdfc; /* Dark Font Color */

  --darkBt : #e91e63; /* Dark Button Background */

  --darkBa: #2d2d30; /* Dark Background Alt */

  --darkBs: #252526 ; /* Dark Background Sec */

}

.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)}

 الخطوه06: 

أضف الآن JavaScript التالي الموجود أعلى </body>العلامة مباشرةً. إذا لم تجده، فمن المحتمل أنه تم تحليله بالفعل وهو &lt;/body&gt;.

<script>
  /*<![CDATA[*/
  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 = 'Starting Download in <span>' + dldLf + '</span> seconds...';
    dldCo.classList.add('dldAlt');
    
    var downloadTimer = setInterval(function timeCount(){
        dldLf -= 1;
        dldMe.innerHTML = 'Starting Download in <span>' + dldLf + '</span> seconds...';
        dldPg.style.strokeDashoffset = Math.floor((dldLf / time) * 100);

      if(dldLf <= 0){
        clearInterval(downloadTimer);
        dldMe.innerHTML = 'Please wait...';
        
        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>

الخطوة 08: تم ذلك! أضف أكواد HTML التالية إلى منشورات مدونتك من خلال عرض HTML لإضافة مربع التنزيل التنازلي .

           <script>

  /*<![CDATA[*/
  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 = 'Starting Download in <span>' + dldLf + '</span> seconds...';
    dldCo.classList.add('dldAlt');
    
    var downloadTimer = setInterval(function timeCount(){
        dldLf -= 1;
        dldMe.innerHTML = 'Starting Download in <span>' + dldLf + '</span> seconds...';
        dldPg.style.strokeDashoffset = Math.floor((dldLf / time) * 100);

      if(dldLf <= 0){
        clearInterval(downloadTimer);
        dldMe.innerHTML = 'Please wait...';
        
        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>