في الكثير من المواقع الإلكترونية التي تقدم خدمة تنزيل التطبيقات تجد ميزة العداد التنازلي علي زر التحميل. وهذه الميزة لها فوائد كثيرة على المدونة ومنها زيادة مدة مكوث الزائر عليها وكذا جعل التحميل أكثر احترافية. لكن هل يمكن إضافتها على مدونات بلوجر؟ في هذا الدرس سوف نتعرف على طريقة إضافة زر التحميل مع عداد تنازلي على بلوجر بسهولة.
إذا كنت لا تعرف كيفية التعديل على الألوان في هذه الميزة فلا تقلق فقد قمنا مسبقا بتنسيقها من حيث الألوان والمظهر. حتى تقوم بعملية النسخ واللصق فقط على المدونة الخاصة بك.
قبل أن نشرع في شرح الإضافة أريد أن أنوه إلى أنه لا يجب أن تضع وقتا طويلا في عداد التحميل حتى لا يمل الزائر ويخرج بدون تنزيل هذه البرامج التي يريدها. ولعل أفضل وقت يمكن اعتماده ما بين 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- تغير علامة #### برابط التحميل وتضغط على حفظ. ومبروك عليك تقوم بعرض المقال وتجرب وستعمل معك بإذن الله.
عندما تريد وضع رابط التحميل في أي مقالة أخرى يكفي وضع الكود الأخير مع تغيير رابط التحميل أما الكودين السابقين فيكفي وضعهما في في أكواد القالب في المرة الأولى فقط. بعدها تقوم بلصق الكود الأخير في أي مقالة تود أن تضع فيها رابط التنزيل.
العداد الخاص بالتحميل لا يشتغل ؟ ما العمل
ردحذفربما ارتكبت خطأ في تطبيق الطريقة لكن جرب أن تضيف الأكواد كلها داخل المقال
حذف