كيفية إضافة زر التحميل مع عداد تنازلي على بلوجر 2023

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

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

كيفية إضافة زر التحميل مع عداد تنازلي على بلوجر 2023

قبل أن نشرع في شرح الإضافة أريد أن أنوه إلى أنه لا يجب أن تضع وقتا طويلا في عداد التحميل حتى لا يمل الزائر ويخرج بدون تنزيل هذه البرامج التي يريدها. ولعل أفضل وقت يمكن اعتماده ما بين 10 ثوان إلى 15 ثانية على الأكثر.

لمعاينة الزر من هنا:

رابط التحميل جاهز! انقر على الزر أسفله للتحميل

تحميل

شرح إضافة زر التنزيل مع عداد للوقت على Blogger

1- توجه إلى بلوجر المظهر تعديل HTML

2- تبحث عن الوسم <head/> ثم تضع فوقه مباشرة الكود التالي:

    <style>
.dowbox {display: flex;justify-content: center;padding: 15px 0;}
.gedone{background: #cbffb5;padding: 10px 20px;border-radius: 3px;}
#Stop_Timer {background: #f7f7f7;padding:0 0 1px 0;border-radius: 3px;text-align: center;}
.jistbutton{border-radius:3px;}
Cnt-Timer{font-size:16px;opacity:.8;display:inline-flex;align-items:center}
Cnt-Timer svg{width:20px; height:20px;}
.jistbutton {width: fit-content;font-size: 14px;border-radius: 3px;background: #43a533;align-items: center;padding: 5px 15px;color: #fff;display: flex;margin: 0 auto;}
.jistbutton svg {fill: transparent;margin-left: 6px;stroke: #fff;width: 16px;height: 16px;}
</style>  

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


  
  <script>/*<![CDATA[*/
var counter = 10; // أضف الوقت هنا بالثواني
var id,downloadButton=document.getElementById("Stop_Timer"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){counter--,counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>انتظر <span>"+counter.toString()+"</span> ثوان</strong><p/><Cnt-Timer><svg viewBox='0 0 40 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> جاري تجهيز الملف... انتظر رجاء!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Count_Time");clickbtn.onclick=startDownload;
/*]]>*/ </script> 

4- الآن تتوجه إلى المقالة التي تريد فيها وضع زر التحميل وتختار المكان المناسب ثم تقوم بلصق فيه الكود التالي:


  <div class="downloadb">
<div class="dowbox"style="text-align: center;"><a class="jistbutton" id="Count_Time"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="transparent" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/></svg> تحميل</a> </div>
<div id="Stop_Timer" target="_blank">
  
<!-- أضف المحتوى الخاص بك هنا لإظهاره بعد انتهاء المؤقت -->
<p class="gedone">رابط التحميل جاهز! انقر على  الزر أسفله للتحميل<p/> 
<a href="####" class="jistbutton"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/></svg> تحميل</a>
</div>
</div>

5- تغير علامة #### برابط التحميل وتضغط على حفظ. ومبروك عليك تقوم بعرض المقال وتجرب وستعمل معك بإذن الله.

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

2 تعليقات

  1. العداد الخاص بالتحميل لا يشتغل ؟ ما العمل

    ردحذف
    الردود
    1. ربما ارتكبت خطأ في تطبيق الطريقة لكن جرب أن تضيف الأكواد كلها داخل المقال

      حذف
أحدث أقدم

نموذج الاتصال