اضافة صندوق التحميل مع عداد

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


في هذا المقال سأطرح طريقة لـ اضافة صندوق التحميل مع عداد متغير بحسب الرغبة وايضا يمكنك اضافة تفاصيل عن الملف كأسمه وحجمه ونبذة عنه وايضا زر للتحميل, عاين الإضافة ثم تابع المقال لشرح كيفية اضافته لمدونتك.

مــعاينة الإضــافـة

اتجه الي بلوجر ثم اختر المظهر ثم تعديل HTML
ابحث عن الوسم </head> والصق الكود التالي قبله/بعده

 <script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script> 

هذا هو الكود الخاص بخط الأيقونات اذا كان موجود لديك لا داعي لإضافته
ابحث عن الوسم </head> والصق الكود التالي قبله/بعده

 <style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#561cc3;float:left;font-family: unset;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#44267b;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#561cc3;color:#fff;padding:20px;display:block;border-top-left-radius:3px;border-top-right-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:right}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-left-radius:3px;border-bottom-right-radius:3px;color:#555;font-size:14px}#downloadx{float:left}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#561cc3;float:left;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:left}.file-deskripsi{display:block}.file-deskripsi span{margin-left:5px}
@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, #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=15,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'/> سيتم تحميل الملف خلال  "+l.toString()+"ثواني ...",t.style.display="none",n.style.fontFamily=" unset" )},1e3)}
//]]>
</script>
 

قم بتغيير الكتابات بما يناسبك ولتغيير عداد الثواني قم بتغيير l=15 لعدد لثواني الذي تريده.

اضافة الصندوق لمقالات
عندما تريد اضافة الصندوق لمقالاتك , قم بإختيار نمط 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> تــحـمـيــل </button>
<a id="downloadx" target='_blank' href="#url" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i>  يتم التحميل الأن </a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> مقدم من مدونة الأثير</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 الملف بحجم 36 KB</span>
</div>
</div>
<div class="catatan-downx">
قالب ثيماتي : قالب بلوجر متجاوب لعرض القوالب | Themes Responsive blogger template   </div>
</div> 

مع تغيير #url برابط التحميل والكلمات بما يناسبك
الى هنا اكون قد وصلت لنهاية هذا المقال, لا تبخلو علينا بتعليقاتكم المشجعة ,ايضا اذا كانت لديكم اي استفسارات يسعدنا الإجابة عليها في التعليقات