اضافه صندوق التحميل مع عداد مثل قالب plus ui

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

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

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

معاينه

1. قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيار المظهر ثم تعديل html
2. قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم

.dldCo{
  --boxC : #08102b;  
  --boxBg : #fffdfc; 
  --fontF : inherit; 
  --svgS : #fffdfc;
  --btnBg : #16967f;
  --darkC : #fffdfc; 
  --darkBt : #16967f;
  --darkBa: #2d2d30; 
  --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;left: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)}

3. قم بالبحث عن وسم </body> ثم اضف الكود التالى اعلى الوسم

<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 = 'سيبدا التحميل بعد <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>

4. قم بالدخول الى الصفحه التى تريد وضع الصندوق بها واضف بها الكود التالى

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' 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='الاسم'>Music_Wallpaper.png</span>
        <span data-text='التسميه'>Music</span>
        <span data-text='الحجم'>3.05MB</span>
        <span data-text='الدقه'>1920×1080</span>
        <span data-text='الصيغه'>.png</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>

قم بازاله الاكواد المميزه واضف الاكواد الخاصه بك

تعديل الصندوق

للتعديل على الجدول يمكنك التعديل على الاكواد الملونه بالقيم المتاحه فى الجدول التالى

القيم	الكود
#	اضف الرابط الذى سيتم توجي الزائر اليه
10	استبدله بعدد الثوانى الذى تريدها
false	استبدلها بTrue اذا كنت تريد ان يفتح الرابط فى نافذه جديده

الوضع الليلى

الكود التالى مناسب لقالب median ui v1.7

.nB[data-theme=dark] .dldCo{color:var(--darkC)} .nB[data-theme=dark] .dldBx{background:var(--darkBs)} .nB[data-theme=dark] .dldIm, .nB[data-theme=dark].dldSl{background:var(--darkBa)} .nB[data-theme=dark] .dldSv .b{stroke:#404045} .nB[data-theme=dark] .dldSv .c{stroke:var(--darkBt)} .nB[data-theme=dark] .dldBt{background:var(--darkBt)} .nB[data-theme=dark] .dldMe span{color:var(--darkBt)}

من الصعب عمل الوضع الليلى لجميع القوالب لذلك اذا كنت تحتاج الوضع الليلى لقالب معين يمكنك مراسلتنا عبر الفيسبوك او تيليجرام

تحميل الاكواد

downlod box with count.zip 4.94KB

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