اضافه اسكربت صندوق التحميل مع عداد الى بلوجر

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

 

اضافه اسكربت صندوق التحميل مع عداد الى بلوجر

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

وتم تكويد هذا الاسكربت وانشائه بثلاث لغات برمجه وهم Html و CssوJava Script كما ان هذا الاسكربت خالى من الاخطاء ويوفر عليك اضافه صفحه تحويل الروابط لان هذا الاسكربت سيغنيك عنها

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

معاينه

ولاضافه هذا الاسكربت يرجى اتباع الخطوات بطريقه صحيحه

كيفيه اضافه الاسكربت

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيارالمظهرثم تعديل html
2.قم بالبحث عن وسم ]]></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:hover {opacity: .8;}
.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:#16967f;color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px;cursor:pointer}
.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}} 
3.قم بالبحث عن وسم </body>   واصف الكود التالى اعلى الوسم
  <script type='text/javascript'>//  <![CDATA[
var timeLeft = 10
; //اضبط الوقت هنا
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.wcTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='أرجو الإنتظار <span>'+timeLeft+'</span> Detik.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});// ]]>
</script>

لتعديل الوقت قم بالتعديل على الرقم 10 المظلل فى الاعلى

4.الان قم بنسخ الكود التالى الخاص بHtml واضفه الى مقالك او موضوعك 
<div class='downloadInfo'>
<span class='fileType' data-text='zip'
></span>
<div class='fileName'>
<span class='textd'>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<a class='fileLink' aria-label='Download'><i class='icon download'></i></a>
</div>
<div class='wcTargetLink'>https://www.scriptonline.codes/
</div>
للتعديل على اكوادHtml قم بتغيير الاكواد المظلله فى الاعلى

الوضع الليلى

اذا كان قالبك يحتوى على الوضع الليلى قم باضافه الاكواد التاليه اعلى وسم ]]></b:skin>
.darkMode.downloadInfo{background-color:#252526; border:0}
 .darkMode .downloadInfo .fileType{background-color:#1e1e1e)}
للتعديل على الالوان قم بتغيير الالوان المظلله فى الاعلى

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

إرسال تعليق