مكتبة أزرار الويب الجزء 3

مكتبة أزرار الويب الجزء 3

يوجد الآن مشاهدة التعليقات : 43

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

كل من لديه مدونة ومهتم بالتدوين وبموقعه من ناحية الشكل ككل يريد يوميا أن يجدد شيئ حتى ولو كان بسيط وإضافتنا لليوم عبارة عن أزرار مثل المستعملة في المدونة سبق وقدمت أزرار الجزء الأول والثاني هذه المرة سنكمل مع الجزء الثالث
<<الجزء الأول>>
<<الجزء الثاني>>
شرح طريقة تركيب الستايل
1. داخل القالب ابحث عن </head> وضع الكود التالي فوقه إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
* لتغيير الأيقونات تابع التدوينة التالية هنا
2. ابحث عن ]]></b:skin> ثم ضع ستايل الأزرار فوقه
الأزرار الأولى
/* CSS Button Style Simple*/
.button{float:right;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {opacity:1;padding:7px 14px!important;background:#9eb2c0;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download {opacity:1;padding:7px 14px!important;background:#fe4e3f;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download2:hover,.demo2:hover,.demo1:hover,.demo:hover,.download1:hover,.download:hover {opacity:0.9;transition:opacity .4s ease-in-out;}
.demo:before {content:'\f06e';display:inline-block;;margin-left:10px;
width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out; }
.download:before {content:'\f019';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download1 {opacity:1;padding:7px 14px!important;background:#FEC93F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download1:before {content:'\f07b';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.demo1 {opacity:1;padding:7px 14px!important;background:#FE843F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.demo1:before {content:'\f013';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.demo2 {opacity:1;padding:7px 14px!important;background:#FE3F9B;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.demo2:before {content:'\f0ee';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
.download2 {opacity:1;padding:7px 14px!important;background:#3FA2FE;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,'ge_ss_tvbold';text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
.download2:before {content:'\f0c1';display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
الأزرار الثانية
/* CSS Button Style Flat */
.buttonhm{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.buttonhm li{display:inline;margin:0;padding:0;}
.buttonhm li a{background:#3498db;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
.buttonhm li a:hover{background:#2980b9;}
.buttonhm1 li a:hover{background:#C22D2D;}
.buttonhm1{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.buttonhm1 li{display:inline;margin:0;padding:0;}
.buttonhm1 li a{background:#DB3434;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
الأزرار الثالثة
/* CSS Button Style Ar1web */
.buttonar1web{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.buttonar1web li{display:inline;margin:0;padding:0;}
.buttonar1web li a{padding:7px 20px;margin:auto 5px;font-size:13px;font-weight:bold;cursor:pointer;border-radius:2px;border:1px solid #ccc;text-shadow:1px 1px 0 #fff;color:#555 !important;background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));background:-webkit-linear-gradient(top, #fff, #f2f2f2);background:-moz-linear-gradient(top, #fff, #f2f2f2);background:-ms-linear-gradient(top, #fff, #f2f2f2);background:-o-linear-gradient(top, #fff, #f2f2f2);box-shadow:0 1px 2px #ddd;font-family: electrolize;}
.buttonar1web li a:hover{border-color:#bbb;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);color:#111 !important;}
طريقة التركيب Html
1. إذا اردت إستخدام زر واحد إختر الكود من <a إلى <a/
2. احذف الزر الذي لا تريده من <li> إلى </li>
3. ضع بدل # الرابط
4. المحدد باللون البرتقالي هو كود لبداية كل زر ونهايته </ul>
الأزرار الأولى
<div style='text-align: center;'>
<ul class='button'>
<li><a class='demo' href='#'>معاينة</a></li>
<li><a class='demo1' href='#'>تخصيص</a></li>
<li><a class='demo2' href='#'>رفع مباشر</a></li>
<li><a class='download' href='#'>تحميل مباشر</a></li>
<li><a class='download1' href='#'>تحميل الملف</a></li>
<li><a class='download2' href='#'>الرابط مرفق</a></li>
</ul>
</div>
<div class='clear'/>
الأزرار الثانية
 
<div style='text-align: center'>
<ul class='buttonhm'>
<li><a href='#' target='_blank'>Live Demo</a></li>
<li><a href='#' target='_blank'>Download</a></li>
</ul>
<ul class='buttonhm1'>
<li><a href='#' target='_blank'>Live Demo</a></li>
<li><a href='#' target='_blank'>Download</a></li>
</ul>
</div>
<div class='clear'/>
الأزرار الثالثة
<div style='text-align: center'>
<ul class='buttonar1web'>
<li><a href='#' target='_blank'><i class='icon-eye-open'/> Live Demo</a></li>
<li><a href='#' target='_blank'><i class='icon-link'/> Download</a></li>
</ul>
</div>
<div class='clear'/>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 43 تعليقًا:

  1. أول تعليق =D سلمت يدااااك <3

    جزاك الله كل خير

    ردحذف
  2. أخ حسام هذه أول تجربة لي للأكواد انظر إلى نهاية التدوينة هنا http://www.ebda2.net/2014/09/Test-mental-age.html يظهر تماماً لكن بدون الـ رمز ! لماذا ؟

    الكود كما وضعته هو من بداية كود حرف الـ A إلى إغلاقها

    ردحذف
    الردود
    1. هل وضعت أكواد Css لأني لم أجدها في قالبك ؟

      حذف
    2. لا تعذب نفسك أخي حسام يبدو مالي بهم نصيب :( لأنهم تضاربوا مع أكواد الـ CSS الخاصة بالتجميعة الأول .

      مضحك هه أنتظرت هذا الجزء بفارغ الصبر وفي النهاية لم يكن لي به نصيب :(

      حذف
    3. :) لا الأكواد مختلفة جرب وضعهم فوق head/ بين الوسمين <style> <style/>

      أضفهم أنت كما شرحت في التدوينة

      حذف
    4. نعم أخي أضفتهم كما شرحة بين الوسمين لكن نفس الشيء ، لا بأس لا تهتم .

      حذف
    5. ستكون أزرار اخرى إنشاء الله

      حذف
    6. إن شاء الله ^_^ ، شكرأً لـ رحابة صدرك أخي حسام :)

      حذف
  3. اخى ممكن تصمم لى لوجو مثل اللى عندك ارجوك ^_^

    ردحذف
    الردود
    1. اسف اخي :( لا اصمم الشعارت حاليا

      حذف
  4. مشكور أخي عمل ممتاز ;)
    أخي ممكن أسماء لمصممين"أجانب" محترفين لقوالب بلوجر"قوالب اجنبية"
    أو روابط لمدونلتهم أو مواقعهم

    أكن شاكراً لك :lv

    ردحذف
    الردود
    1. ابحث في ThemeForest هنال العديد من المصممين الأجانب

      حذف
    2. أريد قوالب مجانية و ليست مدفوعة

      حذف
    3. تفضل : http://www.mybloggerthemes.com/

      حذف
  5. السلام عليكم

    هل استيع تغير لو الزر فقط ؟؟؟

    ردحذف
    الردود
    1. نعم تستطيع

      حذف
    2. اسف كنت اقصد ( استطيع )

      المهم

      ما هيا الطريقة ؟؟

      حذف
    3. في أكواد Css ستجد مثال Background : #ddd
      غير كود اللون بالذي تريده يمكنك الإطلاع على الألوان من هنا
      http://www.ar1web.com/p/colorflat.html

      حذف
    4. يا اخي اريد تغير لون الزر في موضوع واحد فقط

      مثال - رز ربط مباشر اريده في نفس الموضوع بالون الاحمر و الازرق

      مثل هذه الصوره

      http://awesomescreenshot.com/0c53lp62ec

      وشكرا لك

      حذف
    5. عيك وضع في class='***' إسم الزر اخر مثلا ضع download1

      حذف
  6. شكرا
    ممكن السلايدر شو الذي يوجد هنا
    http://it9antiqny.blogspot.com/

    ردحذف
    الردود
    1. اسف اخي لا يمكنني أخذه من القالب .. إذا تواجد معروض سأضعه

      حذف
  7. غير معرف10/04/2014

    شكرااا لك اخي انت مبدع وشكراا لك على المواضيع الجيده والمهمة

    ردحذف
    الردود
    1. العفو اخي .. اسعدني مرورك القيم

      حذف
  8. شكرا أخي
    مدونتي : modhilweb.blogspot.com

    ردحذف
  9. اخي يظهر لي شكل الزر غير كامل يعني لاتظهر لي الايقونه ممكن حل المشكله

    ردحذف
    الردود
    1. ضع الأكواد الأولى التي بالتدوينة نسيتها

      حذف
  10. Salem Mano3/15/2015

    السلام عليكم اخي

    ممن هذه الصورة psd و جزاك الله خيرا

    http://4.bp.blogspot.com/-AS2Xpa9GN5w/VLweHQ1u6EI/AAAAAAAAHEI/9nvwu4pBiYc/s1600/flagihm.png

    ردحذف
  11. تفضل: http://www.mediafire.com/download/fexsyefvxbjfrxu/Ribbons_Corner.rar

    ردحذف
  12. Yousef4/08/2015

    شكرا أخي

    ردحذف
  13. شكرا لك ابدعت ♥الله يسلمك ايدك لانك تهتم بمدونين العرب ♥شكرا♥

    ردحذف
    الردود
    1. الله يسلمك أخي الكريم شرفتنا بمرورك

      حذف
  14. اخي ممكن تحل لي واحد مشكل تاع صندوق تعليق في اسقل مواضيع لايظهر ما الحل وشكرا لك
    واتمنى الرد

    ردحذف
    الردود
    1. 1. إليك هذا الحل الأول >> من الإعداد أدخل لـمشاركات وتعليقات ثم في موقع التعليقات اختر "مضمن"
      2. الحل الثاني اذهب للمشاركات قم بتحرير الموضوع ومن إعدادات المشاركات إضغط على خيارات واختر "سماح"

      حذف
  15. السلام عليكم أخي حسام لقد أعجبتني القائمة العمودية الموجودة بالمعاينة هل ممكن الكود

    ردحذف
    الردود
    1. عليكم السلام أخي ستجدها بهذه التدوينة: http://www.ar1web.com/2014/10/css-side-menu.html

      حذف
  16. شكرا أخي العزيز دائما مبدع

    ردحذف
  17. لما تصلح هده الازرار ممكن تشرحلي اخي ^^

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

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

    ردحذف
    الردود
    1. عكيك بإضافة هذه الخاصية : target="_blank
      مثال :
      <a href="http://www.ar1web.com/p/broken-link.html" target="_blank">اضغط هنا</a>

      حذف
  19. غير معرف12/16/2015

    شكرا لك لقد ساعدتني كثيرا بارك الله فيك و طول عمرك انشاء الله
    :)
    ;)

    ردحذف
    الردود
    1. يسرني ان تدويناتنا ساعدتك ولاقت اعجابك أخي
      شكراً لمرورك

      حذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم