ازرار ملونة متعددة الإستخدام جاهزة لمدونتك

السلام عليكم ورحمة الله وبركاته

اقدم لكم اليوم مجموعة فاخرة من الازرار المصممة بصيغة css يمكنكم إستعمالها كازرار تحميل ومعاينة وروابط خارجية او داخلية خفيفة وسهلة الإستخدام

طريقة إستخدام هذه الازرار في مدونتك


أولاً إذهب غلى لوحة التحكم في مدونتك ثم القالب ثم إضغط على تحرير html
 ثم أضف الرمز التالي فوق الرمز  </head> مباشرةً

<link href="https://cdn.staticaly.com/gh/mohammedxx/madad2/master/btn.min.css" rel="stylesheet" media="screen"/>

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



<a class="btn" href="http://www.madad2.com/" target="_blank"> رابط</a>
<a class="btn btn-primary" href="http://www.madad2.com/" target="_blank"> رابط</a>
<a class="btn btn-info" href="http://www.madad2.com/" target="_blank"> رابط</a>
<a class="btn btn-success" href="http://www.madad2.com/" target="_blank"> رابط</a>
<a class="btn btn-warning" href="http://www.madad2.com/" target="_blank"> رابط</a>
<a class="btn btn-danger" href="http://www.madad2.com/" target="_blank"> رابط</a>
<a class="btn btn-inverse" href="http://www.madad2.com/" target="_blank"> رابط</a>
 

<a href="http://madad2.com/" target="_blank"><button class="btn btn-large" type="button">زر كبير</button></a>

<button class="btn btn-large btn-primary" type="button"><a href="http://www.madad2.com/" target="_blank">زر كبير</a></button>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-large  btn-info" type="button">زر كبير</button>  </a>

<a href="http://www.madad2.com/" target="_blank"><button button="" class="btn btn-large  btn-success type="><span class="">زر كبير</span></button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-large  btn-warning" type="button">زر كبير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-large  btn-danger" type="button"><span class="">زر كبير</span></button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-large  btn-inverse" type="button"><span class="">زر كبير</span></button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn" type="button">الزر الافتراضي</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-primary" href="google.com" type="button">الزر الافتراضي</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-info" type="button">الزر الافتراضي</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-success" type="button">الزر الافتراضي</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-warning" type="button"><span class="">الزر الافتراضي</span></button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-danger" type="button"><span class=""><span class="">الزر الافتراضي</span></span></button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-inverse" type="button">الزر الافتراضي</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-small" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-small btn-primary" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-small  btn-info" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-small  btn-success" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-small  btn-warning" type="button"><span class="">زر صغير</span></button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-small  btn-danger" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-small  btn-inverse" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-mini" type="button"><span class="">زر صغير</span></button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-mini btn-primary" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-mini btn-info" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-mini btn-success" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-mini btn-warning" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-mini btn-danger" type="button">زر صغير</button></a>

<a href="http://www.madad2.com/" target="_blank"><button class="btn btn-mini btn-inverse" type="button">زر صغير</button></a>



طبعا كل زر له معرف خاص به كما هو مشار إليه في الكود السابق btn btn-small btn-primary
يمكن أختيار أي زر في وقت لاحق وإضافته في مدونتك ليصبح بهذا الشكل



فقط أنسخ المعرف الخاص به او الرابط كله ثم عدل عليه:



<a href="http://madad2.com/" target="_blank"><button class="btn btn-large" type="button">زر كبير</button></a>

أتمنى أن تحوذ إعجابكم وإذا كان هناك أي إستفسار على كيفية إستخدامها لا تتردد في ترك تعليق يمكننا تحديث الموضوع في أي وقت :)
مشاركات أقدم المقال التالي
3 تعليق
  • firodari
    firodari 11‏/11‏/2014، 4:03:00 ص

    الرمز الأول غير صحيح قم بأضافة / قبل < ليصبح </ ومبروك

    • مداد الجليد
      مداد الجليد 11‏/11‏/2014، 6:42:00 م

      أحسنت أخي الكريم بارك الله فيك

  • روائع التطوير
    روائع التطوير 13‏/07‏/2018، 2:16:00 ص

    احسنت اخي الكريم وبارك الله فيك.
    اريد وضع ثلاثة أزرار بلون واحد تحت عنوان المدونة كل زر يحتوي على رابط لصفحة من صفحات المدونة.
    يرجى مساعدتك لي واكون ممتناً لك.

أضف تعليق
عنوان التعليق