كيفية إضافة زر تحميل مطور بعداد مؤقت

السلام عليكم، مرحبا بكم مرة اخرى في موقعنا المتواضع TI9NIYA ARABIC هذه المرة سنقدم لكم طريقة اضافة زر تحميل مطور مع عداد مؤقت والتي تساعد في الحفاظ على معدل الإرتداد على موقعك وزيادة نسبة مشاهدة الإعلانات.

 لمحة عن زر التحميل المطور :

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

  معاينة

 ما هي مميزات زر التحميل المؤقت:

يساعد الزر والوقت الذي ينتظره الزائر في التقليل من معدل الارتداد بمدونتك، وهذا له تأثير جيد في تحسين محركات البحث لموقعك على الويب أو مدونتك.

ومع هذه الأداة ، ستساعدك أيضا في زيادة أرباح موقع ان كنت تستعمل اعلانات Google Adsense أو أي شركة إعلانية أخرى .

 ماهي عيوب هذا الزر

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

  طريقة تركيب الزر :

لإضافة الزر على موقعك ستحتاج إضافة بعض الأكواد  الخفيفة إلى قالبك css و html و JavaScript .

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

أولا الصق رمز HTML التالي في الموضوع أو الصفحة التي تريد إضافة زر تحميل مؤقت فيها.

  <div class='downloadInfo'>
   <span class='fileType' data-text='.Zip '></span>
   <div class='fileName'>
      <span class='textd'>تحميل الملف من TI9NIYA-AR</span>
      <span class='fileSize'>حجم الملف - 204.7kb</span>
   </div>
   <a class='fileLink' aria-label='تحميل' id="filelink1" onclick="DwnTmrFunction()"><i class='icon download'></i></a>
</div>
<div class="notesDn" id="notesDn">
   <p>انتظر قليلا وسيتم فتح رابط التنزيل تلقائيا...</p>
</div>
<div class='DnTargetLink'>https://www.tikniya.xyz</div>

لا تنسى تغيير المعلومات المحددة بالتي تنسابك.

الخطوة الثانية : ابحث عن الوسم ]]></b: skin> وقم بلصق الكود التالي فوقه.

   .downloadInfo{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px}
.downloadInfo a{background-color:#C10008
;color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px}
.downloadInfo a:after{content:attr(aria-label)}
.downloadInfo .fileType:before{content:attr(data-text)}
.downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px}
.downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8}
.icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.wcTargetLink{display:none} 
@media screen and (max-width:480px){
.downloadInfo{padding:12px}
.downloadInfo a{width:50px;height:50px;border-radius:10px}
.downloadInfo a:after{display:none}
.downloadInfo a .icon{margin:0}}
.notesDn{margin-right:65px;background-color:#e1f5fe;margin-top:0;max-width:435px;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border-bottom-right-radius:5px;border-bottom-left-radius:5px;position:relative;margin-top:-60px;z-index:-1;transition-property:all;transition-duration:.5s;transition-timing-function:ease}.notesDn p{padding:0 0 0 16px;margin:0;color:#9B011C;opacity:.8;font-size:12px}@media screen and (max-width:480px){.notesDn{margin-right:0;max-width:500px}.downloadInfo{border-radius:5px 5px 0 0}.downloadInfo .fileType{border-radius:5px 0 0 0}}@media screen and (max-width:396px){.notesDn{margin-top:-40px}}.DnTargetLink{display:none}Dncolor{color:#ff0000;font-size:1.5em;font-weight:700}.drkM .notesDn p{color:#fffdfc;}.drkM .notesDn{background-color: #252526;}

  

تالثا : انسخ وألصق كود JavaScript التالي مباشرة فوق الوسم </body> .

 <!-- JAVASCRIPT BUTON DOWNLOAD  BY TI9NIYA ARABIC -->

<script type='text/javascript'>

//<![CDATA[

var timeLeft=10,downloadBtn=document.querySelector(".fileLink"),countdown=document.querySelector(".textd");function DwnTmrFunction(){document.getElementById("notesDn").style.marginTop="-22px",document.getElementById("filelink1").style.pointerEvents="none",document.getElementById("filelink1").style.opacity=".6"}downloadBtn.addEventListener("click",()=>{var e=document.querySelector(".DnTargetLink").innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML="انتظر قليلا <Dncolor>"+timeLeft+"</Dncolor> ثانية.",timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});


//]]>

</script>
  

   التعديل على الأكواد

timeLeft = 10 هو الكود المسؤول عن عدد الثواني يمكنك تغيير الرقم بما تشاء . 

 يمكنك أيضا تغيير كل من كلمة  انتظر قليلا و ثانية .

ملاحظة : من الأفظل ألا تجعل الزائر ينتظر كثيرا من الوقت، لذالك لا يجب رفع العداد لأكثر من 15 ثانية.

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