شاشة الإنتظار

لغة القالب

عمل أزرار بحسب المحتوى الذي تستخدمه معاينة تحميل شراء وغيرها

كن مدون
الأربعاء, مارس 02, 2022
CSS

 الأزرار تعتبر إضافة جمالية لتنسيق المواضيع , لكنها في نفس الوقت تعتبر إضافة أساسية للمواقع المعتمدة بشكل اساسي على الروابط الخارجية

كمواقع تحميل البرامج والملفات أو التسويق بالعمولة وغيرها

أحيانا يصعب إيجاد زر يكون مظهره مناسب لكل محتوى نستخدمهه أو أن الزر موجود لكن تنسيقه غير متماشي مع القالب

فربما يكون الزر غاية في الجمال لكنه غير مناسب لشكل القالب وتنسيقه العام

الحل عندنا ان شاء الله 

عمل أزرار بحسب المحتوى الذي تستخدمه معاينة تحميل شراء وغيرها

تم عمل مظهر زر بشكل مبسط بحيث ينسجم مع كل القوالب كذلك يمكن تنسيقه بحسب المحتوى الذي نهدف لإستخدامه

يمكنك معاينة بعض الأزرار التي يمكن عملها بالكود


طريقة الإستخدام

كود الستايل

أولا قم بالإطلاع على هذا الموضوع من هنــا فمن خلاله يمكنك أن تقرر هل ستضيف الكود في الموضوع ام في القالب نفسه
<style>
.CNMUB{overflow:hidden;max-width:100%;margin:10px auto;clear:both;text-align:center;position:relative}
.CNMUB a{text-decoration:none;margin:0 5px 10px !important;position:relative;height:48px;line-height:48px;padding:0 15px !important ;overflow:hidden;display:inline-block;border-radius:4px;color:#fff;font-family:inherit;font-size:16px;transition:all .4s ease}
.CNMUB a:hover{background-color:#222}
.CNMUB a *{float:right;line-height:inherit}
.CNMUB i{font-size:20px;margin-left:8px}
.CNMUB img {width: auto !important;height: 30px !important;max-height: 30px !important;max-width: 40px !important;margin: 9px -6px 0 5px;}
.CNB1 {background-color: #2A9F65;}  
</style>
لو قررت اضافته في القالب تضيف فوق الوسم </head> أما لو في الموضوع تضيفه في أى مكان يمكن في نهاية الموضوع بعد تحويل الوضع الى وضع HTML 

تنسيق الكود

الكود الأحمر هو الذي ستحتاج أن تكرره إن أردت أكثر من زر والكود الأصفر بداخله هو لون الزر
الرقم 4 هو رقم استدارة الزر زده أو قلله لزيادة أو تقليل الإستدارة

كود HTML

هذا الكود ستضيفه داخل الموضوع في المكان الذي تريد
<div class="CNMUB">

<!--بداية الزر-->
<a class="CNB1" href="#" target="_blank">
<i class="fa fa-download"></i>   
<span>اسم الزر</span> 
</a>   
<!--نهاية الزر-->

</div>
 كرر من أول كود البداية حتى كود النهاية الخاص بالزر لتحصل على زر جديد
رمز # تستبدله بالرابط المراد فتحه
الكود المعلم بالأحمر هو كلاس الزر عدل الرقم 1 برقم آخر لتحصل على زر جديد مع تغيير نفس الأمر في الكود الأحمر الموجود في خطوة الستايل السابقة لتعطيه لون مميز له هو أيضاً كما هو واضح في المعاينة
كلمة اسم الزر عدلها بما تريد
الكود المعلم بالأخضر هو كود الأيقونة الموجودة على الزر يمكنك أن تعدلها بأى أيقونة تعجبك تكون مناسبه للزر بحسب المحتوى الخاص لديك ويمكنك الرجوع لمكتبة الأيقونات من هنا ونسخ كود HTML الخاص بالأيقونة التي تعجبك
ان كانت تلك المكتبة ليست متاحة في قالبك يمكنك مراجعة هذا الموضوع لتعرف كيف تضيفها
أما لو كنت لا تريد استخدام تلك المكتبة وتريد استخدام صورة أيقونات عادية
استخدم هذا الكود بدلا من كود الأيقونة
<img src="*"/>
واستبدل فيه رمز النجمة برابط صورة الأيقونة
مثال على زر بصورة وليس بأيقونة
بهذا الكود الخيارات أمامك مفتوحه لتحصل على أى زر مناسب لمحتوى تقدمه , وبلون يعجبك وكذلك عدم الإعتماد على أزرار مدمجه في قالبك والإعتماد على هذا الكود يكون أفضل لك لانك تستطيع نقل تنسيقها عند تغيير القالب لأى قالب آخر
عمل أزرار بحسب المحتوى الذي تستخدمه معاينة تحميل شراء وغيرها كن مدون : موقع متخصص في تطوير منصة بلوجر

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. والله من أفضل الـمشاركات الت يرأيتها على "كُن مدون"
    شكرا يا الـغالي ♥

    ردحذف
    الردود
    1. سعيد جداً ان الموضوع نال استحسانك أخي منير
      اكرر شكري لك على الدعم للموقع والتعليقات التي تشاركنا بها
      تسلم أخي الحبيب ♥♥♥

      حذف
  2. السلام عليكم أخي أريد أن أسألك بخصوص هذا الموقع اسمه adsense checker عندما افحص عليه موقعي يقول لي not valid url ماذا يفحص هذا الموقع ؟ وما رأيك في دومين موقعي هل به مشكلة ما تصل لحظر جوجل له أو له سمعة سيئة علي الانترنت

    رابط موقع الفحص : https://adsensechecker.com

    رابط موقعي : https://www.ageofscience.online

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      لا اعلم أخي الكريم ما هي الخوارزمية التي يتبعها ذلك الموقع في التعرف على الروابط
      بالتالي لا أستطيع افادتك في الأمر
      اما مسألة هل موقعك سئ السمعة او شئ من هذا القبيل لا يظهر لي بالنظرة الأولية انه به مشكلة يبدوا الدويمن عاديا ولا مشكلة فيه

      حذف
  3. شكرا لحضرتك يااستاذنا دايما بتساعد الجميع بمواضيعك المفيدة ربنا يجعلها فى ميزان حسناتك انك مستمر فى افادة الكثير رغم ظروف الحياة ومشاكلها ♥

    ردحذف
    الردود
    1. حبيبي أستاذ احمد طالما أمثالك يا طيب دائما يدعمون ما أقدمه فهذا أقل شئ أقدمه للمحترمين أمثالك
      شكراً لك يا طيب على الدعم والتشجيع

      حذف
  4. اولا بارك الله فيك
    ثانيا بخصوص التعديل فى الاكواد فلا يوجد الوان فى الاكواد كما ذكرت فى الشرح

    ردحذف
    الردود
    1. وفيك بارك الله أخي الكريم
      انا ذكرت هذا الجزء في الشرح "الكود الأحمر هو الذي ستحتاج أن تكرره إن أردت أكثر من زر والكود الأصفر بداخله هو لون الزر
      "
      هذا لون الزر في الكود #2A9F65
      وانت عندما تكرر كود الزر كما وضحت تستطيع ان تغيير اللو نليصبح كل زر بلون منفصل مثال لو سنستخدم ثلاثة أزرار
      يكون هكذا
      .CNB1 {background-color: #2A9F65;}
      .CNB2 {background-color: #446eac;}
      .CNB3 {background-color: #9000d1;}

      حذف

عدد المواضيع