مساحة إعلانية

الأحد، 28 أبريل، 2013

الأحد، 28 أبريل، 2013

ازرار CSS لمدونتك ومن تصميمك

create css buttons
ازرار Css Buttons أصبحت رائجه ومستخدمه من قبل كثير من المدونين نظراً لأنها تضيف لمسة جمالية للمواضيع وأيضا هي مميزة ولافتة للإنتباه فيراها القارئ بسهولة وهناك الكثير من الإضافات الجاهزة لصنع تلك الأزرار لكن هناك حكمة شهيرة تقول " لا تعطني سمكة ولكن علمني كيف أصطاد "
وهذا ما سنتعلمه وهو طريقة صنع تلك الأزرار بحيث تصنع الزر الذي يتناسب مع الوان مدونتك ويتطابق معها 100% وسنستخدم لعمل الأزار موقع متخصص في صنعها , هناك مواقع كثيرة لصنع الأزرار لكن الموقع الذي سنستخدمه هو أسرعها واسهلها في التعامل لدخول الموقع اضغط على الزر التالي وهذا الزر مثال للمعانية 


وهذا شرح لقائمة تنسيق الأزرار الخاصة بالموقع

CSS Button Maker
والفديو التالي هو توضيح عملي لطريقة صناعة الأزرار واستخدام الموقع

وهذا هو الكود الناتج من عملية تصميم الزر

.button {
   border-top: 1px solid #de8200;
   background: #f78000;
   background: -webkit-gradient(linear, left top, left bottom, from(#fcc565), to(#f78000));
   background: -webkit-linear-gradient(top, #fcc565, #f78000);
   background: -moz-linear-gradient(top, #fcc565, #f78000);
   background: -ms-linear-gradient(top, #fcc565, #f78000);
   background: -o-linear-gradient(top, #fcc565, #f78000);
   padding: 7px 14px;
   -webkit-border-radius: 29px;
   -moz-border-radius: 29px;
   border-radius: 29px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #000000;
   font-size: 19px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #fa0519;
   background: #fa0519;
   color: #ffffff;
   }
.button:active {
   border-top-color: #2faafc;
   background: #2faafc;
   }

هذا الكود يضاف فوق الوسم ]]></b:skin> ولكن طبعا تحتاج لضغط سهم توسيع عناصرا لستايل

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

هذه الكلمة button  والمتكررة ثلاث مرات هي معرف الزر ولهذا يفضل تغييرها بكلمة من عندك تميز الزر
مثلا نكتب buttonred أو أي كلمة المهم ان لا تكون بها مسافات
وإن أردت ان تضيف أكثر من زر كل ما عليك ان تقوم بتنسيق الزر باللون الذي يعجبك ثم تغير المعرف الخاص به وتضيف الكود الخاص كما فعلت بالزر الأول وهكذا
الرقم 19 هو حجم الخط يمكنك تغييره كنوع أكبر من التحكم
أما هذا الكود    font-family: Georgia, serif; هو وسم الخط وان كنت تستخدم خط مخصص في مدونتك استبدل الوسم بوسم الخط الخاص بك

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

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

<a class="button" href="#" rel="nofollow" target="_blank">Word</a>

نستبدل Word بأى كلمة نريد مثل تحميل معاينة أى شئ
ونستبدل هذا الرمز # بالرابط الذي نريد الزر أن يفتحه عند الضغط عليه
ونستبدل button بمعرف الزر الذي سنستخدمه
هذا الكود target="_blank"  معناه أن الرابط سيفتح في صفحة جديدة ان اردته أن يفتح في نفس الصفحة قم بإزالته


 الى هنا انتهى موضوعنا وبالتوفيق للجميع 
دمتم في أمان الله

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

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

    ردحذف
    الردود
    1. مرحباً بالغالي أبو ملاك
      نورت الموضوع يا طيب
      تحياتي لك

      حذف
  2. السلام عليكم ورحمة الله وبركاته
    كما عودتنا دائما بالجديد والإبداع
    أشكرك أخي الغالي عمرو وشرح رائع
    جزاك الله خيرا دمت في رعاية الله

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

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

    ردحذف
    الردود
    1. حياك الله أخي سعيد
      أنا بالفعل نوهت عن طريقة تكرار الأزرار بألوان أخرى في الموضوع
      عبر تغيير معرف الزر أما ان كان لديك قصد آخر فضلا التوضيح
      وجزيل الشكر لمرورك حبيبي

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©