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

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

هده الإضافة سوف تعطى للزر عداد تنازلي قبل فتح الرابط لبقاء الزائر أطول وقت في المدونة

كيفية تثبيت زر مع مؤقت العد التنازلي على مدونة بلوجر

 أصبحت أزرار التحميل أمرًا مهمًا للغاية يجب الانتباه إليه، خاصة بالنسبة للتنزيلات المتخصصة مثل التطبيقات والصور والموسيقى ومقاطع الفيديو والمستندات والملفات الأخرى.

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

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

معاينة

لتركيب زر التحميل مع عداد مؤقت بشكل

1. سجل دخولك إلى مدونة بلوجر
2.  اضغط على المظهر ثم تحرير HTML 
3.  ابحث عن </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 Rotkx */ #btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:left;text-transform:capitalize;font-weight:500;transition:all 0.5s; font-family:inheri;}#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-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:#e67e22;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: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'></i> سيتم تحميل الملف بعد "+l.toString()+" ثواني....",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> تحميل</button> <a id="downloadx" href="RotkxLink" 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> حجم الملف 300MB</span> </div> </div> <div class="catatan-downx"> إذا لم يتم التنزيل تلقائيًا فالرجاء النقر فوق اعادة تحميل. وإذا كان الرابط معطل، يرجى الإبلاغ عبر صفحة اتصل بنا في هذه المدونة. </div> </div>

تم النسخ للحافضة

عدل الكود بما يناسب موضوعك انتهي الدرس

أخي الكريم زائر ومتابع 

مدونة فوتوماكس- photoomax

فضلاً، لا تدع هذه المحاضرة تقف عندك، ساهم في نشرها،

وشاركها مع غيرك؛ لتعم الفائدة؛ فالدال على الخير، كفاعله.

تواصلوا معنا إن كان لديكم أي استفسارات أو اقتراحات متعلقة بمحتوى المدونة

يرجى دعمنا من خلال الإعجاب والتعليق والمشاركة؛ للاستمرار في تقديم محتوى تعليمي مفيد.