إضافة ميزة جديدة للتحميل مع عداد تنازلي - أهل القصر إضافة ميزة جديدة للتحميل مع عداد تنازلي - أهل القصر

وَمَنْ يَتَّقِ اللَّهَ يَجْعَلْ لَهُ مَخْرَجًا

Translate

إضافة ميزة جديدة للتحميل مع عداد تنازلي

إضافة ميزة جديدة للتحميل مع عداد تنازلي




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

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

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

شرح كيفية اضافته لمدونتك.



اتجه الي بلوجر، ثم اختر المظهر ،ثم تعديل 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">
 aekweb
    </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">
     
     مدونة أهل القصر  
     </div>
     </div> 
 
ملاحظة :    
 قم تغيير #url برابط التحميل والكلمات بما يناسبك
الى هنا اكون قد وصلت لنهاية هذا المقال, لا تبخلو علينا بتعليقاتكم المشجعة ,ايضا اذا كانت لديكم اي استفسارات يسعدنا الإجابة عليها في التعليقات 


0 استجابة لـ "إضافة ميزة جديدة للتحميل مع عداد تنازلي"

إرسال تعليق

Iklan Tengah Artikel 1