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

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

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

وتم تكويد هذا الاسكربت وانشائه بلغه  Html و Css  ويمكنك معاينه الاسكربت من خلال الزر التالى

معاينه

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

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

1.قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيارالمظهرثم تعديل html
2.قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى اعلى الوسم     
.dlBox{max-width: 500px;background: #f1f1f0;border-radius: 10px;padding: 12px;margin: 1.7em 0;display: flex;align-items: center;font-size: 14px;}.dlBox a:hover {opacity: .8;}
.dlBox a, .dlBox .fT{flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 45px;height: 45px;padding: 10px;background: rgba(0,0,0,.1);border-radius: 5px;}
.dlBox a{background-color:#16967f;color:#fefefe; margin:0;padding:10px 12px;border-radius:5px; width:auto;height:auto; line-height:20px;font-size:13px;cursor:pointer}
.dlBox a:after{content:attr(aria-label)}
.dlBox .fT:before{content:attr(data-text)}
.dlBox .fN{flex-grow: 1;width: calc(100% - 200px);padding: 0 15px}
.dlBox .fN > *{display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.dlBox .fS{line-height: 16px;font-size: 12px;opacity: .8;}
.icon.dl{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'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='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>")}
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.getLink{display:none} 
@media screen and (max-width:480px){
.dlBox{padding:12px}
.dlBox a{width:50px;height:50px;border-radius:10px}
.dlBox a:after{display:none}
.dlBox a .icon{margin:0}} 
3.الان قم بنسخ الكود التالى الخاص بHtml واضفه الى مقالك او موضوعك 
 <div class="dlBox">
  <span class="fT" data-text="zip"></span>
  <div class="fN">
    <span>file name.zip</span>
    <span class="fS">740.00 B</span>
  </div>
  <a class="button" aria-label="تحميل" href="#"><i class="icon dl"></i></a>
</div>
  

تحميل الاكواد

download box.zip 1.04 KB

الخلاصه

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

الاسم احمد منصور امتلك خبره اكثر من ثلاث سنوات فى مجال التدوين مهتم بمجال التدوين والبرمجه

إرسال تعليق