شرح كيفية اضافة أزرار css3 الى بلوجر

بسم الله الرحمن الرحيم , السلام عليكم ورحمة الله وبركاته , في هذه التدوينة سنشرح عن أداة قمت باضافتها الى مدونتي مؤخرا تساعدك على تصميم زر css3 بسهولة ودون تعقيد , صانع الأداة أجنبي ولهذا فإن لغة الأداة انجليزية وفي هذه التدوينة سأقوم بشرح كل كلمة في الأداة ليسهل فهمها , طبعا لمن لا يعرف فإن لغة css3 هي لغة يستخدمها المطورون في تجميل صفحات الويب التي يصممونها , ويمكننا من خلال css3 اضافة تأثيرات جميلة جدا على النصوص والأشكال في موقع الويب مثل اضافة ظل وتدرج للالوان الخ من التأثيرات , وسنرى أيضا كيفية اضافة الازرار الى التدوينة , فتابعوا معي الشرح :
لرؤية زر كمثال مباشر يمكنك زيارة مختبر المدونة على الرابط التالي : http://testanas.blogspot.com/
نذهب الى صفحة صانع أزرار css3 وسترى كما في الصورة ادناه مكان لمشاهدة العمل الذي قمتَ بتصميمه وزر "لإظهار الكود" وهو يعطيك كود الزر عند الانتهاء من العمل
وفي الجهة اليسرى ترى ثلاثة تبويبات هي :
1- Normal وهو يعني احالة الزر بدون الضغط عليه ولا مرور الماوس عليه وهنا نسميه "غير مفعل"

2- Hover وهو يعني حالة الزر عند مرور الماوس عليها وهنا نسميه "ممرر"

3- Pressed وهو يعني حالة الزر بعد الضغط عليه ونسميه "مفعل"

وكل تبويب من التبويبات الثلاثة يحوي نفس القائمة ولهذا شرحت قائمة normal فقط

والآن بعد إضافة جميع التأثيرات التي تريد إضغط على "لإظهار الكود" من الجهة اليسرى في أسفل الصفحة وسيظهر مستطيل يوجد بداخله حقلين أحدهما كود html والآخر كود css . نضيف كود css إلى قالب المدونة ونضيف كود html إلى التدوينة أو أي إضافة داخل المدونة.

والآن نأتي إلى شرح إضافة الزر الى التدوينة أو اي أداة , وقمت بشرحها من خلال الفيديو لكي يتضح لك كل شيء

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

هل اعجبك الموضوع ؟ شاركه مع اصحابك