إذا كنت مدون على منصة بلوجر وتقدم أي نوع من المواضيع يستهدف التحميل يحتاج الزوار إلى تنزيله، فسيكون موضوع هذا اليوم مفيداً جداً بالنسبة لك.
يوجد بعض المواقع التي تقوم بعرض التحميل على صفحة إعادة توجيه برابط خارجي. لاكن، نحن اليوم سوف نشرح طريقة إضافة صندوق تحميل وسط التدوينة مع عداد للوقت بدون الحاجة لنقل الزائر إلى صفحة مغايرة.
يعمل صندوق التحميل وسط التدوينة لمدونات بلوجر على عرض عداد الوقت بمجرد أن يضغط الزائر على زر التنزيل سيتم بدئ حساب الوقت عبر العد التنازلي الذي ستحدد مدته أنت يدوياً.
كيفية يعمل صندوق تنزيل العداد
لا يحتاج صندوق التنزيل مع عداد للوقت إلى الكثير من الخبرة في لغات البرمجة (CSS - HTML) لكي تستطيع التعامل معه، وذلك لأننا قمنا بتجهيزه ليتوافق مع جميع أنواع قوالب بلوجر. كل ما عليك هو إتباع خطوات التركيب المذكورة في الدليل أدناه وسيعمل معك بتوافق وبدون مشاكل.
هذه معاينة كيف يظهر شكل صندوق التحميل بلوجر :
تنبيه:
قبل تركيب صندوق التحميل بلوجر تأكد من تنزيل نسخة إحتياطية من ملف xml للقالب الخاص بك، هذه الخطوة ضرورية لكي تستطيع إستعادة القالب في حال ظهرت مشاكل أثناء التركيب.
شرح إضافة صندوق تحميل للبلوجر (مع عداد تنازلي للوقت)
الخطوة 1: قم بتسجيل الدخول على لوحة التحكم بلوجر.
الخطوة 2: إضغط القائمة الجانبية تم إختر الثيمات.
الخطوة 3: إنزل بالسهم الموجود بجانب "تخصيص" واضغط تعديل HTML.
شاهد أيضاً
الخطوة 4: إبحث عن وسم ]]></b:skin> داخل أكواد القالب وضع كود CSS التالي فوقه مباشرة.
ملاحظة:
لقد قمنا بالتعليم على بعض الأجزاء من الكود باللون الأزرق، تمثل تلك الأكواد التي حددنا عليها (الوضع المظلم). إذا كان القالب الخاص بك يحتوي على وضع مظلم فقم بتعديل ألوان الكود المحدد عليه بما يناسب تصميم قالبِك.
/* Countdown Download Box By Echrah.Net */
.dldCo{
--boxC : #08102b; /* لون الخط */
--boxBg : #fffdfc; /* خلفية الحاوية */
--fontF : inherit; /* إسم الخط */
--svgS : #fffdfc; /* أيقونة SVG */
--btnBg : #482dff; /* خلفية الزر */
--darkC : #fffdfc; /* لون الخط (الوضع المظلم) */
--darkBt : #e91e63; /* خلفية الزر (الوضع المظلم) */
--darkBa: #2d2d30; /* خلفية داكنة Alt */
--darkBs: #252526 ; /* خلفية مظلمة ثانية */
}
.dldCo{-webkit-tap-highlight-color:transparent;position:relative;width:100%;max-width:480px;margin:30px 0;color:var(--boxC);font-family:var(--fontF);transition:margin .6s ease;-webkit-transition:margin .6s ease}
.dldBx{position:relative;z-index:2;background:var(--boxBg);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)}
.dldTp{display:flex;flex-direction:row} .dldIm{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:rgba(0,0,0,.08);border-radius:6px;transition:all .4s ease;-webkit-transition:all .4s ease} .dldIm::before{content:attr(data-text);opacity:.7} .dldIm[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)} .dldIm[style]:not([style=''])::before{display:none}
.dldSv{opacity:0;position:absolute;width:calc(100% + 12px);height:calc(100% + 12px);top:-6px;bottom:-6px;right:-6px;left:-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} .dldIm[style]:not([style='']) .dldSv{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px} .dldSv .b{fill:none;stroke:#e6e6e6;opacity:.9} .dldSv .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}
.dldIn{flex-grow:1;width:calc(100% - 115px)} .dldIn >*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dldIn >*::before{content:attr(data-text) ': ';opacity:.8}
.dldBt{background:var(--btnBg);position:absolute;width:40px;height:40px;bottom:-20px;right: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} .dldBt:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} .dldBt svg{width:24px;height:24px;fill:none;stroke:var(--svgS);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} .dldBt.dldDl{visibility:visible;opacity:1} .dldBt.dldRt{visibility:hidden;opacity:0;bottom:-40px}
.dldSl{z-index:1;position:absolute;bottom:0;height:60px;width:100%;background:var(--boxBg);border-radius:0 0 10px 10px;transition:all .6s ease;-webkit-transition:all .6s ease} .dldMe{position: absolute;width:100%;height:40px;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px} .dldMe span{color:var(--btnBg);font-size:18px;font-weight:600;margin:0 5px}
.dldCo.dldAlt{margin:30px 0 70px} .dldCo.dldAlt .dldIm{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} .dldCo.dldAlt .dldSv{opacity:1} .dldCo.dldAlt .dldDl{visibility:hidden;opacity:0;bottom:-40px} .dldCo.dldRty .dldRt{visibility:visible;opacity:1;bottom:-20px} .dldCo.dldAlt .dldSl{bottom:-40px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.darkMode .dldCo{color:var(--darkC)} .darkMode .dldBx{background:var(--darkBs)} .darkMode .dldIm, .darkMode .dldSl{background:var(--darkBa)} .darkMode .dldSv .b{stroke:#404045} .darkMode .dldSv .c{stroke:var(--darkBt)} .darkMode .dldBt{background:var(--darkBt)} .darkMode .dldMe span{color:var(--darkBt)}الخطوة 5: إبحث عن وسم </body> الموجود في نهاية أكواد القالب، وضع كود JavaScript التالي فوقه مباشرة.
<script>
/*<![CDATA[*/
/* Countdown Download Script By Echrah.Net */
function download(link, time, newtab, id){
var dldCo = document.querySelector(id),
dldMe = document.querySelector(id + ' .dldMe'),
dldPg = document.querySelector(id + ' .dldPg'),
dldDl = document.querySelector(id + ' .dldDl'),
dldRt = document.querySelector(id + ' .dldRt'),
dldLf = time;
dldMe.innerHTML = 'سيتم بدئ التحميل خلال <span>' + dldLf + '</span> ثانية...';
dldCo.classList.add('dldAlt');
var downloadTimer = setInterval(function timeCount(){
dldLf -= 1;
dldMe.innerHTML = 'سيتم بدئ التحميل خلال <span>' + dldLf + '</span> ثانية...';
dldPg.style.strokeDashoffset = Math.floor((dldLf / time) * 100);
if(dldLf <= 0){
clearInterval(downloadTimer);
dldMe.innerHTML = 'الرجاء الإنتظار...';
if (newtab == 'true'){
window.open(link, '_blank');
} else {
window.location.href = link;
};
dldRt.onclick = function (){
if (newtab == 'true'){
window.open(link, '_blank');
} else {
window.location.href = link;
}
};
setTimeout(() => {
dldCo.classList.remove('dldAlt');
dldCo.classList.add('dldRty');
}, 4000);
}
}, 1000);
};
/*]]>*/
</script>الخطوة 6: قم بحفض التعديلات، الآن ضع كود صندوق تحميل بلوجر مع عداد للوقت على "تحرير HTML" في أي تدوينة تريد عرض النموذج عليها [إستبدل الأجزاء المعلم عليها بما يناسبك].
<!--[ Countdown Download Box By Echrah.Net ]-->
<div class='dldCo' id='download1'>
<div class='dldBx'>
<div class='dldTp'>
<div class='dldIm' data-text='.apk' style='background-image:url(رابط_الصورة_هنا)'>
<svg class='dldSv' viewBox='0 0 34 34'>
<circle class='b' cx='17' cy='17' r='15.92' />
<circle class='c dldPg' cx='17' cy='17' r='15.92' />
</svg>
</div>
<div class='dldIn'>
<span data-text='الإسم'>إسم النموذج.apk</span>
<span data-text='التصنيف'>Android Application</span>
<span data-text='الحجم'>75 ميجابايت</span>
<span data-text='المطور'>Echrah.Net</span>
<span data-text='الترخيص'>مجاني</span>
</div>
</div>
<button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><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='dldBt dldRt'><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='dldSl'>
<div class='dldMe'></div>
</div>
</div>إنتبه: إستبدل الأجزاء التالية في الكود بما يناسب.."#" برابط التحميل.10 بعدد ثواني العداد.
لإضافة المزيد من صناديق التحميل في نفس التدوينة إبحث عن:download1 أينما وجدته وغيره بـdownload2 لكي لا يحدث تداخل.
إشرح نت هو الدليل الأكثر شمولاً لتعلم المعرفة التقنية وشروحات عالم الإنترنت.