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

زر التحميل يعتبر جزء اساسي من غالبية المدونات خصوصا التي تعتمد على وجود ملفات وشروحات كثيرة

هده الاضافة سوف تعطى للزر عداد تنازلى قبل قتح الرابط لبقاء الزائر اطول وقت فى المدونة

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

الفائدة من تتبيت الزر هو خفض معدل الارتداد عند زيارة الزائر للصفحة

فبل التتبيت يجب اخد نسخة احتياطية للقالب لتفادى المشاكل ان حدتت

مثال للزر داخل المدونة

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

يتم التحميل الأن

مقدم من مدونة فوتوماكس الملف بحجم 36 KB

اضافة زر التحميل مع عداد مؤقت | Add a download button with a timer

ندخل على القالب تم نبحت عن </head>  او &lt;/head&gt;&lt;!--<head/>--&gt;

نضيف الكو التالى فوقه

  
<!--[ 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(image_url_here)'>
<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='Name'>Music_Wallpaper.png</span>
<span data-text='Category'>Music</span>
<span data-text='Size'>3.05MB</span>
<span data-text='Resolution'>1920×1080</span>
<span data-text='Extension'>.png</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>    

تم نضيف الكود التالى قبل الوسم </head> او &lt;/head&gt;&lt;!--<head/>--&gt;

  
<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:#e67e22;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;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),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)}//]]> </script>    

نضيف الكود السابق في الموضوع بعد تحويل صندوق الكتابة من وضع التأليف الى وضع HTML

اضف الكود التالى مع تغيير مايناسب موضوعك

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

تعديل المقال