تركيب صندوق تحميل الملفات مع العد التنازلي في بلوجر

 موضوع منقول من مدونة rotkx


تركيب صندوق تحميل الملفات مع العد التنازلي في بلوجر

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

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

السبب في اضافة العد التنازلي هو تقليل معدل الارتداد في المدونة عند زيارة الزوار للصفحة.

لتجربة الاضافة يرجي الضغط علي الزر التالي.


حسنا، بدون الإطالة عليكم هذه هي طريقة التركيب.

تركيب صندوق تحميل الملفات مع العد التنازلي في بلوجر


قبل تركيب الصندوق تأكد من وجود اكواد الخطوط الرائعة Font Awesome في القالب، اذا لم تكن موجودة ضع الكود التالي فوق </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>

قم بتسجيل الدخول إلى بلوجر > اضغط على المظهر ثم تحرير HTML > ابحث عن </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> وضع الكود التالي فوقه، او يمكنك ايضا وضعه فوق </head>

<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>

قم بالتعديل علي الكود الذي تم وضع علامة عليه l=10 وهو عدد الثواني اللازمة للإنتظار قبل تحميل الملف، قم بالتعديل علي 10 او اتركها كما هي.

اضعط علي حفظ القالب

الان اذهب الي المشاركات، وقم بتحرير المشاركة الذي تريدها او قم باضافة مشاركة جديدة، وتوجه للتبويب 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>

اعد تعديل العبارات المحددة بالعبارات المناسبة، وكذلك استبدل RotkxLink برابط تحميل الملف الخاص بك.

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



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -