بحث متقدم | التسجيل
الويب العربي
  تسجيل دخول
 
   
   

  ملاحظة
الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.




الموقع متاح للإطلاع والقراءة فقط، المشاركة والمواضيع الجديدة غير متاحة حالياً لحين تطوير الموقع.

عـودة للخلف   الويب العربي دليل ومكتبة الويب العربي مكتبة الويب العربي ويب 2.0 وأكواد متنوعة

بحث
links

ويب 2.0 وأكواد متنوعة
ويب 2.0 وأكواد وأدوات متنوعة لتطوير المواقع
Ajax , XML , CSS , JavaScript ...etc

المحتويات
zip  كود css لصنع زرّ أزرق أو أحمر اللون تتغيّر درجة اللون بالضغط عليه الزر الأيسر : حفظ ، الزر الأيمن : حفظ بإسم

  نبذة : تستطيع باستخدام css صناعة أزرّة بموقعك متعدّدة الألوان وباستخدام صورتين للخلفية مع كود html لتحديد مكان الزر





مثال : لمشاهدة الأزرّة الزرقاء والحمراء من هنا


الكود بهذه الصفحة سيقوم بانشاء الأزرّة الرمادية الموجودة بالأعلى


صورة :





التركيب :

ضع كود الاستايل هذا فى منطقة ال head بموقعك

كود:
<style type="text/css">

a.squarebutton{
background: transparent url('media/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* قم بالتعديل على حجم الخط بما تريد*/
line-height: 15px; 
height: 23px; 
padding-left: 9px; /* عرض الصورة اليسرى اذا أحببت استخدام صورة خاصة بك*/
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*لون خط الكتابة على الزرّ*/
}

a.squarebutton span{
background: transparent url('media/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; 
}

a.squarebutton:hover{ 
background-position: bottom left;
}

a.squarebutton:hover span{ 
background-position: bottom right;
color: black;
}

.buttonwrapper{ 
overflow: hidden; 
width: 100%;
}

</style>

2-- ضع هذا الكود فى المكان الذى تريد ادراج الزرّ فيه فى موقعك


لإضافة زرّ واحد

كود:
<div class="buttonwrapper">
<a class="squarebutton" href="http://www.arabwebtalk.com/"><span>الويب العربى</span></a>
</div>

لإضافة 2 زرّ متجاورين مثلاً



كود:
<div class="buttonwrapper">
<a class="squarebutton" href="الرابط"><span>الكتابة على الزر</span></a> <a class="squarebutton" href="الرابط" style="margin-left: 6px"><span>الكتابة على الزر</span></a>
</div>

مع استبدال الرابط بالرابط الذى سيفتح عليه الزر
والكتابة على الزر بالكتابة التى ستظهر على الزرّ


بالنهاية قم برفع تلك الصورتين الى مجلّد media بنفس مسار صفحة موقعك وبنفس الاسم





ولتفعيل الأزرّة الحمراء استخدم هاتين الصورتين





واستبدل اسم الصور فى كود الأستايل بالأعلى بمسمّى الصور الجديد

square-red-right.gif

square-red-left.gif

واستمتع بالأزرة فى اى مكان بصفحتك

أطيب تحية

قسم : ويب 2.0 وأكواد متنوعة 
 
مفضل Remove from My Favourites إرسال هذه الصفحة لصديق محتويات أخرى مقترحة
بواسطة : محمّد نور ابحث عن جميع المحتويات المضافة بواسطة هذا العضو
28-12-2007
الزيارات 47
206 بايت
 
 

قسم :
 
إنتقل إلى

جميع الأوقات بتوقيت مكة المكرمة. الساعة الآن » 04:47 PM.

Powered by vBulletin
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.


 
 »  خدمات البرمجة   »  رئيسية الدليل
  »  خدمات التصميم   »  الأمن والحماية
  »  الدعاية والتسويق
  »  الدعم والتطوير
  »  الشركات الرسمية
  »  حجز دومينات
  »  خدمات الإستضافة
 
 
  »  مكتبة الإستايلات   »  رئيسية المكتبة
  »  أكواد برمجية   »  أدوات الويب ماسترز
  »  مكتبة الهاكات   »  أدوات المصممين
  »  سكربتات متنوعة
  »  مجلات إلكترونية
  »  بلوكات متنوعة
  »  ثيمات مختلفة
 
 

صحيفة متخصصة في متابعة أخبار وجديد الإنترنت العربي
والحوارات الصحفية ومعلومات تقنية متنوعة .

   
 
 

للتواصل مع فريق عمل الويب العربي
يمكنك ذالك من خلال مركز الدعم والمساندة.

 الدعم الفني |  اعتماد العضويات |  قوانين الإنتساب |  إتفاقية الإستخدام |  أهداف الويب العربي |  دليل الشركات |  مكتبة الويب |  صحيفة الويب العربي |  الرئيسية