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

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

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

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

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

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

ذات صلة


عـرض التعليقات
اخفاء التعليقات

يسعدنا تفاعلكم معنا,نرجو احترام الآداب العامة وعم نشر اي روابط اشهارية.
لإضافة كود قم بتحويله اولا بمحول الاكواد

إخلاء المسؤولية محول الأكواد ابلاغ عن رابط لايعمل

  1. ممكن رابط قالبك السابق بدون حقوق ملكية

    ردحذف
    الردود
    1. سيتم نشره قريبا صديق
      تابع مدونتنا لتحصل عليه فور نشره

      حذف
  2. أخوي لا يوجد صندوق اشترك في النشرة البريدية لديك

    ردحذف
    الردود
    1. موجود في الازرار اعلى الصفحة تحت اسم ووصف المدونة مباشرة
      تستطيع متابعتنا عبر البريد و عبر بلوجر ايضا

      حذف
  3. أخوي هل يمكنني وضع اعلانات أدسنس بداخله

    ردحذف
    الردود
    1. نعم اخي,يمكنك وضع كود الاعلان بوصف الملف اي بعد الكود <div class="catatan-downx">

      حذف
  4. لم تعمل معي

    ردحذف
  5. استمر مجهود جميل جداً، لدي طلب حول امكانية طرح موضوع تشرح فيه كيفية عمل ازرار التحميل والمعاينة في السيدبار

    ردحذف
    الردود
    1. شكرا لك صديقي
      شاهد هذا الشرح
      http://bit.ly/2XhiuyK

      حذف