أزرار بسيطة الإصدار الأول

أزرار بسيطة الإصدار الأول

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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

زِرين بسيطين وبتصميم إحترافي يتضمن المعاينة مع التحميل بإدراج حجم الملف ونص اخر، أزرار بتصميم نقي بإستخدام Css فقط مما يجعلها جد خفيفة وأيضا لها منظر جد رائع تجذبك لضغط عليها 😊 ما يتبقى عليك إلى تركيبها وإستعمالها في موقعك نبدأ بالمعاينة أولا
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه
* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
3.ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
/* CSS Simple Butn Ar1web */
.whitebutton {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebutton a {background: #fff;color: #666;display: block;font-size: 17px;font-weight: 700;font-family: Electrolize,ge_ss_tvbold;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;}
.whitebutton a:before {content: '\f019';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebutton .up {background: #34B4E2;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down {margin: -30px auto;opacity: 0;border-radius: 5px 5px 0 0;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down:before {content:'\f14a';font-family: FontAwesome;font-weight: normal;margin-right: 6px;color: #aaa;}
.whitebutton:hover .up {opacity: 1;transform: translate(0,0);}
.whitebutton:hover .down {opacity: 1;transform: translate(0,-90px);}
.whitebuttondemo {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebuttondemo a {background: #34B4E2;color: #fff;display: block;font-size: 17px;font-weight: 700;font-family:Electrolize,ge_ss_tvbold;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;transition: 350ms;}
.whitebuttondemo a:before {content:'\f002';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebuttondemo a:hover {color:#fff;}
.whitebuttondemo span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebuttondemo .up {background: #444;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebuttondemo:hover .up {opacity: 1;transform: translate(0,0);}
4. أضف الكود الآتي بداخل الموضوع في تبويب HTML
<div class="whitebuttondemo">
<a href="#" target="_blank">معاينة</a><br>
<span class="up">إضغط للمشاهدة</span>
</div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">تحميل مباشر</a><br>
<span class="up">إضغط للبدء</span><br>
<span class="down">2.3MB .rar</span>
</div> 
* لإستعمال كود واحد مثل معاينة فهو محدد باللون البرتقالي من البداية لنهايته
ملحوظة:

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

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

  1. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. غريبة ! جربت وضع كودد css فوق skin
      شككتني لكن جربتها بمدونة وبدون أي مشكل :
      http://ly-ar1web-v3.blogspot.com/2014/09/blog-post.html

      حذف

    2. ضع هذا الكود :
      <div class="whitebutton">
      <a href="#" target="_blank">هنا النص</a><br>
      <span class="up">هنا النص</span><br>
      <span class="down">1.6MB .rar</span></div>

      حذف
    3. أزال المؤلف هذا التعليق.

      حذف
    4. لقد وضعت الأكواد بنفسي في تدوينة أخرى من مدونتك كما تشاهد بالصور لا خطأ .. على ما اعتقد قد يكون هنا كود أو شيئ بسيط في كود الموضوع هو الذي يجعلها تظهر بذلك الشكل جرب بموضوع اخر أو ضع موضوع جديد فقط بالأزرار لتترك الشك
      الصور :
      http://im58.gulfup.com/RwbEHz.png
      http://im58.gulfup.com/QY5no9.png

      حذف
    5. أزال المؤلف هذا التعليق.

      حذف
    6. أزال المؤلف هذا التعليق.

      حذف
    7. والله لا اعلم المشكل مجدد في نفس الموضوع نسخت الكود ولصقته ولم يعد المشكل يمكنك مشاهدة الصورة جربها بنفسك بالضغط على inspecter l'elments
      الصورة :
      http://im47.gulfup.com/Fnqbqg.png
      الكود :
      <div class="whitebutton">
      <a href="#" target="_blank">تحميل مباشر</a><br>
      <span class="up">إضغط للبدء</span><br>
      <span class="down">2.3MB .rar</span></div>

      حذف
    8. أزال المؤلف هذا التعليق.

      حذف
    9. قالبك لا يحب الأزرار @@,
      القائمة موجودة من زمان وقد رأيتها
      تفضل التدوينة :
      http://www.ar1web.com/2014/10/css-side-menu.html

      حذف
    10. أزال المؤلف هذا التعليق.

      حذف
    11. أزال المؤلف هذا التعليق.

      حذف
    12. الكود المسؤل هو .menu-outer > nav ul
      ستجد top: 15%;
      إذا زدت في الرقم فذلك يعني نزول الأقسام إذا نقصت في الرقم فالعكس ،

      حذف
  2. يعطيك العافية ازرارجميلة :lv

    ردحذف
  3. لدي نفس المشكلة لدى الأخ ياسر ما الحل

    ردحذف
  4. لا تتعب نفسك تم الحل =D لقد وضعت الأكواد بين الوسميين style لقد اشتغلو تمام شكرا لك

    ردحذف
    الردود
    1. الحمد لله :D أفزعتني أنت الأخر

      حذف
  5. شكرا لك اخي موضوع جميل و اكثر من رائع اتمنى زيارة مدونتي و ترك تعليقك و شكرا لك

    http://mudwnp.blogspot.com/

    مدون محترف

    ردحذف
    الردود
    1. تشكر على مرورك المميز ، مدونتك جيدة واصل على هذا المنوال في تقديم المواضيع موفق .

      حذف
  6. أخي الأزرار لم تشتغل على هذا القالب في مدونتي ولما بحتت في أكواد css وجدت أن هناك أكواد لأزرار أخرى أتت مع القالب لكن لا أعرف كيف أستعملها ... هل يمكنك إرشادي
    هذه المدونة : www.bloggxp.com

    ردحذف
    الردود
    1. الأزرار تشتغل تم تجربتها على نفس القالب تم تعديلها لتناسب القالب الذي لديك حمل الأكود وضعها مباشرة فوق
      </head>
      http://www.gulfup.com/?uxDRLT
      بالنسبة لأزرار المتواجدة لديك ستجدها بالملف التالي فقط ضع كود الزر في الموضوع :
      http://www.gulfup.com/?PNGi7a

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

    ردحذف
    الردود
    1. تفضل : http://goo.gl/H8JbJq
      الملف بإسم Css Button Simple هو للأزرار التي بهاته التدوينة ضعها مباشرة فوق </head>
      والملف الأخرر للأزرار الخاصة بقالب Bmag

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

    ردحذف
  9. يا اخي ممكن طلب
    كيف اضيف هذه اضافة الى مدونتي مثل الذي في مدونتك
    http://im89.gulfup.com/meZ5Ki.png
    صعود ونزول
    واذا لا تريد ان تعطيني اضافة شكرا

    ردحذف
  10. أزال المؤلف هذا التعليق.

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

      حذف
    2. شكرا اتمني ان تكون باسرع وقت ممكن :-bd

      حذف
  11. السلام عليكم
    ياريت توضحلنا كمان كود اظهار المحتوى الخفى بعد التعليق كما يظهر فى بعض المواقع الالكترونية
    و شاكرة جدا لاهتمامك

    ردحذف
  12. محمد محمود12/21/2014

    شكرا لك أخي الكريم :]

    http://nabd-blog.blogspot.com/

    ردحذف

عن الكاتب :

إرشادات

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

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

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

    كلمة الختام

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