28‏/04‏/2018

اكثر من 10 ازرار بأشكال مختلفة على مدونات بلوجر

اكثر من 10 ازرار بأشكال مختلفة على مدونات بلوجر

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

يمكنك معاينة شكل الازرار من هنا


الان نبدا بشرح التركيب


  1. ابحث في القالب على </head> وضع هذا الكود فوقه مباشرة



  • يمكنك تغيير خلفيات الازرار بوضع الرابط في مكان الاتي


  1. .btnabdoutech23--cover1{background-image:url(هنا خلفية تريدها)}
  2. .btnabdoutech23--cover2{background-image:url(هنا خلفية تريدها)}
  3. .btnabdoutech23--cover3{background-image:url(هنا خلفية تريدها)}
  4. .btnabdoutech23--cover4{background-image:url(هنا خلفية تريدها)}
  5. .btnabdoutech23--cover5{background-image:url(هنا خلفية تريدها)}
الان احفظ القالب 

  • و الان في كل موضوع اردت فيه ضهور زر تضيف هذا الكود




  • الان نشرح كيفية التحكم بشكل الازرار
1- الان لتحكم ب الايقونة
في الايقونات توجد 4 ايقونات في المثال توجد ايقونة الداون لود



<a class="btnabdoutech23 icon-download" href="http://www.abdoutech.com">هنا اسم الملف او الرابط</a>

  • انتا غير icon-download الجزء الذي ب الاحمر 
  • icon-{nameIcon}
  • اسماء الاشكال  cloud, open, clip, link , zip
2- الان لتحكم بتأثير
في التأثيرات يوجد 4 تأثيرات

لاضافت اي تأثير ضف هذا الى جانب الكلاس مثال   class='btnabdoutech23 icon-download btnabdoutech23--shake'

  • انتا غير btnabdoutech23--shake الجزء الذي ب الاحمر
  •  {btnabdoutech23--{ اسم التأثير
  • اسماء التأثيرات flip, rotate, rubber , shake

3- الان لتحكم في الخلفيات
في الخلفيات يوجد 5 خلفيات ويمكنك تغييرهم بوضع رابط الصورة فقط في المكان الذي حددته لك في اول الموضوع

لاضافت اي خلفية ضف هذا جانب الكلاس  مثال  class='btnabdoutech23 icon-download btnabdoutech23--shake btnabdoutech23--cover1'

  • لتغيير الخلفيات انتا تجدهم مرقمين cover1 cover 2 cover3 cover4 cover5 
  • انتا غيرهم كما تريد
وان اعجبك احد ازرار التي في المعاينة يمكنك اخذه ونسخه 
الان نصل الى نهاية الشرح لذا اذا اعجبتك التدوينة لا تنسى الاشتراك في المدونة من هنا لكي تتوصل بكل ما هوا جديد
مشاركة

4 تعليق

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

الرموز الانفعاليةالرموز الانفعالية