أضافة زر أنتظار تحميل العد التنازلي للمدونة

 أضافة زر أنتظار تحميل العد التنازلي  للمدونة 

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

مميزات زر أنتظار التحميل العد تنازلي 

1_ يقلل من معدل الأرتداد للصفحة.

2_ يبقي الزائر لأطول فترة ممكنة مما يزيد فرصتك للربح وتقييم للمدونة لديك.\

3_ يعطي طابع أحترافي للزائر على مدونتك.

4_ يعطي مدونتك مظهر أكتر جمالية.

كيفية أضافة زر أنتضار التحميل بالعد التنازلي 

1_  ندخل لمدونتك بلوجر نقم بدخول على المظهر نأخد نسخة أحتياطية للقالب لأي خطأ يحدت  عند وضعنا الاكواد 

2_ وبعد دلك ندخل الى تعديل html

3_ نقم بوضع الأكواد في مكانها يمكنك مشاهدة فيديو أشرح فيه عن طريقة خطوة بخطوة  في الاسفل المقالة 

فيما يلي ألاكواد المستخدمة لأنتشاء زرالأنتظار بالعد التنزلي 

نقم بوضع هدا الكود فوق الوسم /head 

<style type='text/css'> /* Download Counter Box */ #btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#fc7d45;color:#5d5050;padding:20px;display:block;border-top-right-radius:8px;border-top-left-radius:8px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#363737;border-bottom-right-radius:8px;border-bottom-left-radius:8px;color:#ffae5c;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px} @media screen and (max-width:640px){.batas-downx{float:none;width:100%}} @media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}} </style>

نضع الكود التالي فوق الوسم body/

<script type='text/javascript'> //<![CDATA[ function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> جارى تحميل الملف "+l.toString()+" ثانيه....",t.style.display="none")},1e3)}//]]> </script>

الامن انتهينا من وضع أكواد html الخاصة بالمظهر الان نقم بوضع الكود html في مقالة 

<div class="batas-downx"> <div class="dalam-downx"> <div class="bungkus-info"> <div class="file-info"> اسم الملف </div> <button id="btnx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> تحميل</button> <a href="رابط التحميل" id="downloadx" style="display: none;"><i aria-hidden="true" class="fa fa-cloud-download"></i> اضغط للتحميل</a> </div> <div class="file-deskripsi"> <span class="uploader"><i aria-hidden="true" class="fa fa-user-circle"></i> مدونة اسم المدونه </span> <span class="file-size"> <i aria-hidden="true" class="fa fa-file"></i> حجم الملف 300k</span> </div> </div> <div class="catatan-downx"> إذا لم يتم تنزيله تلقائيًا ، فيرجى النقر على إعادة التنزيل. وإذا كان الرابط معطلاً ، فيرجى الإبلاغ عبر صفحة نموذج الاتصال في هذه المدونة. </div>

</div>

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

تعديل المقال