U3F1ZWV6ZTExODE1MjI5MDcyNDMwX0ZyZWU3NDU0MDY4MTcxNzM3

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

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

اضافة زر التحميل مع عداد للوقت بشكل مختلف لمدونات بلوجر
الفائدة من تتبيت الزر هو خفض معدل الارتداد عند زيارة الزائر للصفحة
فبل التتبيت يجب اخد نسخة احطياطية للقالب لتفادى المشاكل ان حدتت

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


   اسم الملف
مدونة فوتوماكس حجم الملف 300MB
إذا لم يتم تنزيله تلقائيًا ، فيرجى النقر على إعادة التنزيل. وإذا كان الرابط معطلاً ، فيرجى الإبلاغ عبر صفحة نموذج الاتصال في هذه المدونة.

الآن مع التركيب

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


<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>  او &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>


تعديل المشاركة
تعليقات
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة