9 يوليو 2014

مدون محترف اضافات بلوجر مجانيات CSS اضافة ازرار CSS احترافية لمدونتك

اضافة ازرار CSS احترافية لمدونتك

كيفية إنشاء زر معاينة مع تأثير خافت باستخدام شفرة بسيطة لعمل مربع الظل، و بذلك يكون الزر له تأثير توهج و جميل.

ازرار المعاينة او التحميل تعتبر هذه الازرار من اهم اضافات بلوجر و التي يستخدمها الكثير من المدونين فهي تعطي جمالية على المواضيع لذلك اليوم في مدون محترف سوف نتعرف على كيفية إنشاء تأثير خافت في ازرار المعاينة و التحميل حتى هذه الازرار يكون لها تأثير توهج و إنشاء ظلال التي تغطي الشاشة بأكملها و هذا يمكن تطبيقه في العديد من الطرق اعتمادا على إبداع كل منا . لأن هناك العديد من الأشياء التي يمكن القيام به مع CSS3. لأن عالم البرمجة واسع، لذلك يجب أن نستمر في التعلم على مواصلة تطوير قدراتنا من أجل خلق انطلاقة جديدة في عالم البرمجة.


إنشاء زر معاينة احترافي باستخدام CSS3


ابحث عن الوسم ]]></b:skin>و اضف فوقه الكود التالي
mudwnpbutton {
   color: #222;
   background: #9dea4f;
   padding: 20px 30px;
   -webkit-transition:-webkit-box-shadow .5s ease;
   -moz-transition:-webkit-box-shadow .5s ease;
   -ms-transition:-webkit-box-shadow .5s ease;
   -o-transition:-webkit-box-shadow .5s ease;
   transition:-webkit-box-shadow .5s ease;
   margin:auto;
   font: normal 16px Arial, Verdana;
}
.mudwnpbutton:hover {
   color: #222;
   background: #BBFD12;
   -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   position:relative;
   z-index:99999;
}
.mudwnpbutton a {
   color: #222;
   text-decoration: none;
   font: normal 16px Arial, Verdana;
}

أهم الملاحظات حول الكود


1. هذه الكلمة mudwnpbutton والمتكررة ثلاث مرات هي معرف الزر ولهذا يفضل تغييرها بكلمة من عندك تميز الزر
2. وإن أردت ان تضيف أكثر من زر كل ما عليك ان تقوم بتنسيق الزر باللون الذي يعجبك ثم تغير المعرف الخاص به وتضيف الكود الخاص
3. الرقم 16 هو حجم الخط يمكنك تغييره كنوع أكبر من التحكم
4. أما هذا الكود Arial ,Verdana هو الخط وان كنت تستخدم خط مخصص في مدونتك استبدل الوسم بوسم الخط الخاص بك

طريقة استخدام الأزرار في المواضيع


قم بتحويل صندوق المواضيع من وضع التأليف الى وضع HTML
ثم أضف الكود التالي في المكان الذي تريد

<div class="mudwnpbutton ">
<a href="#" target="blank" rel="nofollow">معاينة</a></div>


  1. نستبدل معاينة بأى كلمة نريد مثل معاينة او أى شئ
  2. نستبدل هذا الرمز # بالرابط الذي نريد الزر أن يفتحه عند الضغط عليه
  3. نستبدل mudwnpbutton بمعرف الزر الذي سنستخدمهم

    ملاحظة : الزر الذي في المعاينة منسق و هذا الكود في الموضوع غير منسق و تركته هكذا لكي تقومو بتنسيقه كما تريدو
    يمكنكم ترك تعليق لكي اساعدكم بتنسيق الزر اتمنى ان تعجبكون هذه الاضافة و يمكنك رؤية الزر بالضغط على المعاينة



    في امان الله 
    مدونة مدون محترف

    مواضيع ذات صلة
    اضافة ازرار CSS احترافية لمدونتك
    4 / 5
    بواسطة

    هناك 6 تعليقات :

    1. جميل جدا أخي واصل ابداعك

      ردحذف
      الردود
      1. مرورك الجميل و انا من بعدك بالابداع

        حذف
    2. أزال أحد مشرفي المدونة هذا التعليق.

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

        حذف
    3. انت محترف اخي اسم على مسمى امتنا لك توفيق

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

      بالتوفيق =r

      ردحذف

    يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
    =q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r