اضافة زر التحميل مع عداد للوقت بشكل مختلف لمدونات بلوجر
زر التحميل يعتبر جزء اساسي من غالبية المدونات خصوصا التي تعتمد على وجود ملفات وشروحات كثيرة
هده الاضافة سوف تعطى للزر عداد تنازلى قبل قتح الرابط لبقاء الزائر اطول وقت فى المدونة
الفائدة من تتبيت الزر هو خفض معدل الارتداد عند زيارة الزائر للصفحة
فبل التتبيت يجب اخد نسخة احطياطية للقالب لتفادى المشاكل ان حدتت
مثال للزر داخل المدونة
اسم الملف
مدونة فوتوماكس
حجم الملف 300MB
إذا لم يتم تنزيله تلقائيًا ، فيرجى النقر على إعادة التنزيل. وإذا كان الرابط معطلاً ، فيرجى الإبلاغ عبر صفحة نموذج الاتصال في هذه المدونة.
الآن مع التركيب
ندخل على القالب تم نبحت عن </head> او </head><!--<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> او </head><!--<head/>-->
<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>
تعليقات
إرسال تعليق