كيف احصل على كود الاداة؟

ما ستحتاج اليه هو نسخ هذا النص في صندوق الاكواد.... تعرف على المزيد في المقال.

صِوان: كيفية إنشاء صندوق تحميل مع العداد التنازلي

Split Post - Split Article Into Several Pages

عمل صندوق تنزيل مع العداد التنازلي احترافي

السلام عليكم ورحمة الله وبركاته

مرحباً! ايها الصواني.

صِوان محور الأبعاد الثلاث XYZ

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

قبل أن نبدأ ، دعنا نلقي نظرة على العرض التوضيحي لتصلك فكرة الإضافة.

معاينة في صِوان unPlug

كيفية عمل صندوق تنزيل مع العداد التنازلي؟

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

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

الخطوة 1: أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى لوحة تحكم بلوچر.
الخطوة 2: في لوحة التحكم بلوچر انقر على المظهر.
الخطوة 3: انقر فوق رمز السهم هذا بجوار الزر "تخصيص".
الخطوة 4: انقر فوق تحرير HTML ، ستتم إعادة توجيهك إلى صفحة التحرير.
الخطوة 5: ابحث الآن عن الكود ]]></b:skin> والصق أكواد CSS التالية فوقها مباشرةً.

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

/* Countdown Download Box by Fineshop Design */
.dldCo{
  --boxC : #08102b; /* Font Color */
  --boxBg : #fffdfc; /* Container Background */
  --fontF : inherit; /* Font Family */
  --svgS : #fffdfc; /* Button SVG Stroke */
  --btnBg : #299e94; /* Button Background */
  --darkC : #fffdfc; /* Dark Font Color */
  --darkBt : #299e94; /* 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-left: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;left:-6px;right:-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;left:-10px;right:-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)}
.drkM .dldCo{color:var(--darkC)} .drkM .dldBx{background:var(--darkBs)} .drkM .dldIm, .drkM .dldSl{background:var(--darkBa)} .drkM .dldSv .b{stroke:#404045} .drkM .dldSv .c{stroke:var(--darkBt)} .drkM .dldBt{background:var(--darkBt)} .drkM .dldMe span{color:var(--darkBt)}

الخطوة 6: الآن أضف جاڤا سكريبت التالي أعلى علامة </body>.

<script>
  /*<![CDATA[*/
  /* Countdown Download Script by Fineshop Design */
  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>

الخطوة 7: احفظ التغييرات بالنقر فوق هذا الرمز
الخطوة 8: مبروك لقد تم ذلك! أضف كود HTML التالية في منشورات المدونة الخاص بك من خلال عرض html لإضافة صندوق تنزيل مع العداد التنازلي.

<!--[ Countdown Download Box by Fineshop Design ]-->
<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="الاسم">ترحيب </span>
        <span data-text="نوع">مقطع صوتي</span>
        <span data-text="الحجم">268Kb</span>
        <span data-text="الابعاد">1080×1080</span>
        <span data-text="صيغة">.mp3</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 إذا كنت تريد فتح رابط في علامة تبويب جديدة.
لإضافة مربع تنزيل متعدد ، استبدل download1 و #download1 ، أي بالنسبة إلى مربع التنزيل الثاني ، استبدل download1 بـ download2 و #download1 بـ #download2.

تعديل الكود

نسخت الكود ستحتاج لتطبيق محرر النصوص احترافي انصحك بتطبيق QuickEditor+ هو الانسب ان كنت تستعمل الهاتف اندرويد سيناسب حاجتك لبعض التعديلات البسيطة على الكود فقط تغير الاشياء التي تظهر مميزة في صندوق الأكواد مثلا رقم الهاتف لزر الواتساب ادرج رقمك الخاص.

المشاركات ذات الصلة

شروط الاستخدام

لتقدير أعمال Deo kumar ، ضع في اعتبارك الاحتفاظ بالاعتمادات في الرموز التي ستستخدمها.

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

استنتاج

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

صوانˣʸᶻ

صِوان: كيفية إنشاء صندوق تحميل مع العداد التنازلي

كيفية عمل صندوق تنزيل مع العداد التنازلي؟

تعديل الكود

شروط الاستخدام

استنتاج

عن المؤلف

إرسال تعليق