مرحبا بكم في مدونتي فوتوماكس. مع أطيب التحيات دعونا نبدأ المقال. سنرى اليوم كيفية إنشاء زر التحميل مع معلومات الملف
 |
| كيفية إنشاء زر التحميل مع معلومات الملف |
قبل البدء، يرجى الاحتفاظ بنسخة احتياطية من قالب مدونتك تحسبًا لأي نوع من الأخطاء وإجراء عملية استعادة سهلة.-رسالة إيجابية-
إنشاء زر التنزيل مع معلومات الملف
إنها عملية سهلة للغاية، حيث يتعين عليك فقط إضافة كود CSS في القالب الخاص بك، وبعد ذلك يمكنك إضافة كود HTML لإنشاء زر التنزيل.
لذا يرجى اتباع الخطوات الواردة أدناه بعناية.
الخطوة الأولى: – افتح لوحة التحكم الخاصة بمدونتك.
الخطوة 2: - انتقل إلى قسم المظهر.
الخطوة 3: – انقر على قسم تحرير Html.
الخطوة 4:- انقر في أي مكان داخل منطقة الرمز واضغط على مفتاحي CTRL + F لفتح مربع البحث.
اكتب أو الصق رمز " ]]></b:skin> " في مربع البحث واضغط على Enter او ادخال.
ثم الصق الكود CSS اعلى وسم ]]></b:skin>
مثال تجريبي
<style type='text/css'> .techaadi-icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}.techaadi-icon.techaadi-download{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'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}.techaadi-downloadInfo{max-width:500px;background-color:#fefefe;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:6px;padding:15px;margin-top:20px;margin-bottom:20px;display:flex;align-items:center;line-height:1.8em;font-size:14px}.techaadi-downloadInfo a,.techaadi-downloadInfo .techaadi-fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#f1f1f0;border-radius:10px}.techaadi-downloadInfo a{background-color:#1e1e1e;color:#fefefe;margin:0;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px;text-decoration:none}.techaadi-downloadInfo a:after{content:attr(aria-label)}.techaadi-downloadInfo .techaadi-fileType:before{content:attr(data-text)}.techaadi-downloadInfo .techaadi-fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}.techaadi-downloadInfo .techaadi-fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.techaadi-downloadInfo .techaadi-fileSize{line-height:1.4em;font-size:12px;opacity:.8}.darkMode .techaadi-downloadInfo{background-color:#2d2d30;border:0}.darkMode .techaadi-downloadInfo .techaadi-fileType{background-color:#1e1e1e}@media screen and (max-width:480px){.techaadi-downloadInfo{padding:12px}.techaadi-downloadInfo a{width:50px;height:50px;border-radius:10px}.techaadi-downloadInfo a:after{display:none}.techaadi-downloadInfo a .techaadi-icon{margin:0}} </style>-كود html-
الخطوة 5: - الآن لا تنس حفظ السمة.
الخطوة 6: - استخدام كود HTML في المقالة لإنشاء زر التحميل . استخدم الكود الموضح أدناه لإنشاء الزر الذي تريد إظهاره.
<div class='techaadi-downloadInfo'> <span class='techaadi-fileType' data-text='zip'></span> <div class='techaadi-fileName'> <span>TechAadi.zip</span> <span class='techaadi-fileSize'>100GB</span> </div> <a aria-label='Download' href='رابط التحميل'><i class='techaadi-icon techaadi-download'></i></a> </div>-كود html-
الآن بعد اتباع الخطوات المذكورة أعلاه، أتمنى أن تكون قد نجحت في إنشاء زر التنزيل مع معلومات الملف. إذا كان لديك أي خطأ يرجى الاتصال بنا.
أتمنى أن يعجبك هذا المنشور كيفية إنشاء زر التنزيل مع معلومات الملف. إذا كان لديك أي استفسار فلا تتردد في التعليق أدناه. تابع مدوناتنا للحصول على هذا النوع من المقالات بشكل منتظم.
اليك بعض الدروس المرتبطة بهذا الموضوع
1 تعليقات
شكرا الك
ردحذف{مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ}