مساحة اعلانية

موضوع عشوائي

آخر المواضيع

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

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

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

اتجه الي بلوجر ثم اختر المظهر ثم تعديل HTML
والصق الكود التالي قبله/بعده  </head>   ابحث عن الوسم
 <script type='text/javascript'>//<![CDATA[//CSS Readyfunction 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>
والصق الكود التالي قبله/بعده  </head>   بعد ان تضف الكود السابق ابحث عن الوسم
 <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#  برابط التحميل والكلمات بما يناسبك

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

الكــاتــب

    • مشاركة

ليست هناك تعليقات:

جميع الحقوق محفوظة لــ فلاما للمعلوميات 2019 ©