غالبا ما نرى بعض المواقع تستخدم عداد ببضع ثواني لأزرار التحميل الذي يظهر كعد تنازلي حتى يبدأ التحميل تلقائيا, طبعا الامر جيد بالنسبة لمدونات التحميل خاصة التي تعتمد كليا على التحميل , وقد تشتكي هذه المدونات من معدل الإرتداد العالي الذي يؤثر على ترتيب المدونات في نتائج البحث.
في هذا المقال سأطرح طريقة لـ اضافة صندوق التحميل مع عداد متغير بحسب الرغبة وايضا يمكنك اضافة تفاصيل عن الملف كأسمه وحجمه ونبذة عنه وايضا زر للتحميل, عاين الإضافة ثم تابع المقال لشرح كيفية اضافته لمدونتك.
مــعاينة الإضــافـة
اتجه الي بلوجر ثم اختر المظهر ثم تعديل HTML
ابحث عن الوسم </head>
والصق الكود التالي قبله/بعده
هذا هو الكود الخاص بخط الأيقونات اذا كان موجود لديك لا داعي لإضافته
ابحث عن الوسم </head>
والصق الكود التالي قبله/بعده
بعد ان تضف الكود السابق ابحث عن الوسم</body> والصق الكود التالي قبله/بعده
قم بتغيير الكتابات بما يناسبك ولتغيير عداد الثواني قم بتغيير l=15 لعدد لثواني الذي تريده.
اضافة الصندوق لمقالات
عندما تريد اضافة الصندوق لمقالاتك , قم بإختيار نمط HTML بدلاً من تأليف اثناء تحريرك للمقال والصق الكود التالي في المكان الذي تريده
مع تغيير #url برابط التحميل والكلمات بما يناسبك
الى هنا اكون قد وصلت لنهاية هذا المقال, لا تبخلو علينا بتعليقاتكم المشجعة ,ايضا اذا كانت لديكم اي استفسارات يسعدنا الإجابة عليها في التعليقات
في هذا المقال سأطرح طريقة لـ اضافة صندوق التحميل مع عداد متغير بحسب الرغبة وايضا يمكنك اضافة تفاصيل عن الملف كأسمه وحجمه ونبذة عنه وايضا زر للتحميل, عاين الإضافة ثم تابع المقال لشرح كيفية اضافته لمدونتك.
مــعاينة الإضــافـة
اتجه الي بلوجر ثم اختر المظهر ثم تعديل HTML
ابحث عن الوسم
<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>
هذا هو الكود الخاص بخط الأيقونات اذا كان موجود لديك لا داعي لإضافته
ابحث عن الوسم
<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#561cc3;float:left;font-family: unset;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#44267b;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#561cc3;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:#561cc3;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:5px}
@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, #downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>
بعد ان تضف الكود السابق ابحث عن الوسم
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=15,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'/> سيتم تحميل الملف خلال "+l.toString()+"ثواني ...",t.style.display="none",n.style.fontFamily=" unset" )},1e3)}
//]]>
</script>
قم بتغيير الكتابات بما يناسبك ولتغيير عداد الثواني قم بتغيير
اضافة الصندوق لمقالات
عندما تريد اضافة الصندوق لمقالاتك , قم بإختيار نمط 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" target='_blank' href="#url" 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>
الملف بحجم 36 KB</span>
</div>
</div>
<div class="catatan-downx">
قالب ثيماتي : قالب بلوجر متجاوب لعرض القوالب | Themes Responsive blogger template </div>
</div>
مع تغيير
الى هنا اكون قد وصلت لنهاية هذا المقال, لا تبخلو علينا بتعليقاتكم المشجعة ,ايضا اذا كانت لديكم اي استفسارات يسعدنا الإجابة عليها في التعليقات
ممكن رابط قالبك السابق بدون حقوق ملكية
ردحذفسيتم نشره قريبا صديق
حذفتابع مدونتنا لتحصل عليه فور نشره
أخوي لا يوجد صندوق اشترك في النشرة البريدية لديك
ردحذفموجود في الازرار اعلى الصفحة تحت اسم ووصف المدونة مباشرة
حذفتستطيع متابعتنا عبر البريد و عبر بلوجر ايضا
أخوي هل يمكنني وضع اعلانات أدسنس بداخله
ردحذفنعم اخي,يمكنك وضع كود الاعلان بوصف الملف اي بعد الكود <div class="catatan-downx">
حذفلم تعمل معي
ردحذفاستمر مجهود جميل جداً، لدي طلب حول امكانية طرح موضوع تشرح فيه كيفية عمل ازرار التحميل والمعاينة في السيدبار
ردحذفشكرا لك صديقي
حذفشاهد هذا الشرح
http://bit.ly/2XhiuyK
إرسال تعليق
يرجى الالتزام بسياسة التعليقات لدينا ليتم نشر تعليقك . وشكرا