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

السلام عليكم متابعينا على مدونة تى جو اليوم استكمالا لـ دورة التعديل على قوالب بلوجراقدم لكم اضافه جيده جدا وهى اضافة زر تحميل بوقت على قوالب بلوجر , انها اضافه جيده ومميزه تابعونا

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

هذه الاضافه مميزه جدا ومن اهم مميزاتها ما يلى 

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

1. احتوائه على عداد للوقت يعد بشكل تنازلى مدة 10 ثوانى.
2. تقليل معدل الارتداد فى المدونه حيث عند ضغط الزائر على الزر يعد بشكل تنازلى مدة 10 ثوانى مما يزيد من وقت بقاء الزائر وبالتالى تقليل معدل الارتداد.
3. يتميز بشكل جيد جدا مما يعطى انطباع احترافى لـ مدونة بلوجر الخاصه بك.

طريقة اضافة اداة زر التحميل مع عداد رقمى

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

فيديو شرح كيفية اضافة زر التحميل مع عداد للوقت

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

اكواد الاضافه

نقوم بوضع الكود التالى اعلى وسم اغلاق الهيد

فوق /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>

هكذا نكون انتهينا من اكواد المظهر وبقى لنا الكود الذى يتم وضعه داخل التدوينات ويمكنك نسخه من هنا

<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>