BLANTERTOKOSIDEv102
6217215329334371520

طريقة إضافة صندوق تحميل مع عداد مؤقت لبلوجر

 مرحبا بكم مرة اخرى على TI9NIYA ARABIC

إذا كنت تقدم أي روابط ملفات في موقع الويب الخاص بك لتحميله من قبل الزوار ، فسيكون صندوق التحميل هذا مفيدًا لك.  

سنتعرف اليوم على طريقة إضافة صندوق تحميل مع عداد مؤقت لموقع Blogger . عندما ينقر المستخدمون على زر التنزيل ، سيبدأ العداد المؤقت قبل الإنتقال للرابط.

قبل أن نبدأ في شرح طريقة الإضافة ، دعونا نلقي نظرة على المعاينة التالية.

  معاينة

 طريقة إضافة صندوق تحميل مؤقت:

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

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

الخطوة 1:   أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى لوحة تحكم Blogger .
الخطوة 2: في القائمة الجانبية ، توجه إلى  المظهر.
 الخطوة 3: انقر فوق رمز السهم المتجه   للأسفل بجوار زر "تخصيص" .
 الخطوة 4: انقر فوق تحرير HTML ، سيتم فتح صفحة التحرير.
الخطوة 5: الآن ابحث في الكود ]]></b:skin> والصق أكواد CSS التالية فوقه مباشرة. 
/* Countdown Download Box by TI9NIYA ARABIC */
.ti9oCo{
--btnBg : #ff0000; /* لون زر التحميل  */
--darkBt : #e91e63; /* لون زر التحميل في الوضع المظلم */
}
.ti9oCo{-webkit-tap-highlight-color:transparent;position:relative;width:100%;max-width:480px;margin:30px 0;color:08102b;font-family:inherit;transition:margin .6s ease;-webkit-transition:margin .6s ease}
.ti9oBx{position:relative;z-index:2;background:#fffdfc;width:100%;padding:15px;display:flex;flex-direction:column;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.ti9oTp{display:flex;flex-direction:row} .ti9oIm{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-left:15px;background:rgba(0,0,0,.08);border-radius:6px;transition:all .4s ease;-webkit-transition:all .4s ease} .ti9oIm::before{content:attr(data-text);opacity:.7} .ti9oIm[style]:not([style='']){width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)} .ti9oIm[style]:not([style=''])::before{display:none}
.ti9oSv{opacity:0;position:absolute;width:calc(100% + 12px);height:calc(100% + 12px);top:-6px;bottom:-6px;left:-6px;right:-6px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;transition:all .5s ease;-webkit-transition:all .5s ease} .ti9oIm[style]:not([style='']) .ti9oSv{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;left:-10px;right:-10px} .ti9oSv .b{fill:none;stroke:#e6e6e6;opacity:.9} .ti9oSv .c{fill:none;stroke:var(--btnBg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:all .5s ease;-webkit-transition:all .5s ease}
.ti9oIn{flex-grow:1;width:calc(100% - 115px)} .ti9oIn >*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ti9oIn >*::before{content:attr(data-text) ': ';opacity:.8}
.ti9oBt{background:var(--btnBg);position:absolute;width:40px;height:40px;bottom:-20px;left:20px;outline:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:all .3s ease;-webkit-transition:all .3s ease;cursor:pointer} .ti9oBt:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} .ti9oBt svg{width:24px;height:24px;fill:none;stroke:#fffdfc;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} .ti9oBt.ti9oDl{visibility:visible;opacity:1} .ti9oBt.ti9oRt{visibility:hidden;opacity:0;bottom:-40px}
.ti9oSl{z-index:1;position:absolute;bottom:0;height:60px;width:100%;background:#fffdfc;border-radius:0 0 10px 10px;transition:all .6s ease;-webkit-transition:all .6s ease} .ti9oMe{position: absolute;width:100%;height:40px;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px} .ti9oMe span{color:var(--btnBg);font-size:18px;font-weight:600;margin:0 5px}
.ti9oCo.ti9oAlt{margin:30px 0 70px} .ti9oCo.ti9oAlt .ti9oIm{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} .ti9oCo.ti9oAlt .ti9oSv{opacity:1} .ti9oCo.ti9oAlt .ti9oDl{visibility:hidden;opacity:0;bottom:-40px} .ti9oCo.ti9oRty .ti9oRt{visibility:visible;opacity:1;bottom:-20px} .ti9oCo.ti9oAlt .ti9oSl{bottom:-40px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.darkMode .ti9oCo{color:#fffdfc} .darkMode .ti9oBx{background:#252526} .darkMode .ti9oIm, .darkMode .ti9oSl{background:#2d2d30} .darkMode .ti9oSv .b{stroke:#404045} .darkMode .ti9oSv .c{stroke:var(--darkBt)} .darkMode .ti9oBt{background:var(--darkBt)} .darkMode .ti9oMe span{color:var(--darkBt)}
الخطوة 6: قم الآن بإضافة كود  JavaScript التالي فوق علامة </body> . إذا لم تجده ، فمن المحتمل أنه قد تم تحليله بالفعل وسيكون على الشكل التالي &lt;/body&gt; .
 <script>
/*<![CDATA[*/
/* Countdown Downloadby TI9NIYA ARABIC*/
function download(link, time, newtab, id){
var ti9oCo = document.querySelector(id),
ti9oMe = document.querySelector(id + ' .ti9oMe'),
ti9oPg = document.querySelector(id + ' .ti9oPg'),
ti9oDl = document.querySelector(id + ' .ti9oDl'),
ti9oRt = document.querySelector(id + ' .ti9oRt'),
ti9oLf = time;
ti9oMe.innerHTML = 'جاري التنزيل <span>' + ti9oLf + '</span> ثانية...';
ti9oCo.classList.add('ti9oAlt');
var downloadTimer = setInterval(function timeCount(){
ti9oLf -= 1;
ti9oMe.innerHTML = 'جاري التنزيل <span>' + ti9oLf + '</span> ثانية...';
ti9oPg.style.strokeDashoffset = Math.floor((ti9oLf / time) * 100);
if(ti9oLf <= 0){
clearInterval(downloadTimer);
ti9oMe.innerHTML = 'انتظر قليلا ...';
if (newtab == 'true'){window.open(link, '_blank');} else {window.location.href = link;};
ti9oRt.onclick = function (){if (newtab == 'true'){window.open(link, '_blank');} 
else {window.location.href = link;}};
setTimeout(() => {
ti9oCo.classList.remove('ti9oAlt');
ti9oCo.classList.add('ti9oRty');
}, 4000);}}, 1000);};
/*]]>*/
</script>

الخطوة 7: احفظ التغييرات بالنقر فوق الرمز   
 الخطوة 8: الآن كل ماعليك هو اضافة أكواد HTML التالية في المنشورات التي تريدها من خـلال تحرير HTML للصفحة وإضافة الكود التالي.

      <!--[ Countdown Download Box by TI9NIYA ARABIC ]-->
<div class='ti9oCo' id='download1'>
<div class='ti9oBx'>
<div class='ti9oTp'>
<div class='ti9oIm' data-text='.png' style='background-image:url( رابط الصورة )'>
<svg class='ti9oSv' viewBox='0 0 34 34'>
<circle class='b' cx='17' cy='17' r='15.92' />
<circle class='c ti9oPg' cx='17' cy='17' r='15.92' /></svg>
</div>
<div class='ti9oIn'>
<span data-text='الإسم'>TI9NIYA</span>
<span data-text='نوع'>APK</span>
<span data-text='الحجم'>15mg</span>
<span data-text='الناشر'>ADMIN</span>
</div>
</div>
<button onclick='download("#", "10", "false", "#download1")' class='ti9oBt ti9oDl'><svg viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
<button class='ti9oBt ti9oRt'><svg viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
</div>
<div class='ti9oSl'>
<div class='ti9oMe'></div>
</div>
</div>
   التعديل على الأكواد

استبدل الأجزاء المحددة بلون بارز حسب حاجتك.

استبدل # برابط التنزيل

استبدل الرقم 10 بعدد الثواني الذي تريد.

اذا كنت تريد فتح الرابط في نافذة جديدة قم بتغيير false إلى true

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