كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ Empty كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية

Admin المساهمات : 488 تاريخ التسجيل : 26/08/2020

بسم الله الرحمن الرحيم
تحية طيبة اخواني وخواتي اعضاء منتدى الدعم
اقدم لكم كود اكثر من رائع لوضع ازرار المنتدى بشكل انيق ورائع لجميع النسخ

صورة للكود الشكل الاول

تكبير الصورة معاينة الأبعاد الأصلية.

كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ Empty كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية 1210

الشكل الثاني منحني

تكبير الصورة معاينة الأبعاد الأصلية.

كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ Empty كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية 1410

طريقة التركيب بسم الله فل نبدا

اولا اذهب الى لوحة التحكم
لوحة التحكم +مظهر المنتدى +الصفحة الرئيسية + الصفحة الرئيسية و ازرار التصفُّح
وبحث عن خيار / اظهار الصور فقط في عارضة أزرار التصفح : نعم
كما في الصورة التالية

تكبير الصورة معاينة الأبعاد الأصلية.

كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ Empty كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية 1510

ثانياااا نذهب الى ادارة الصور
لوحة التحكم + مظهر المنتدى + ادارة الصور + عام /تحكم
ثم ركب الصور التالية كل في مكانة المخصص
كما في الصورة التالية

تكبير الصورة معاينة الأبعاد الأصلية.

كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ Empty كود CSS لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية 1610

صورة الــــــــزر	الرابــــــــــــــــــــــــــــــــــــــــــــــــط
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_index.png
	الكود:تحديد الكود الكود: http://i97.servimg.com/u/f97/19/34/83/47/0210.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_gallery.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_portal.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_faq.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_search.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_members.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_groups.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_profile.png
	الكود:تحديد الكود الكود: http://i97.servimg.com/u/f97/19/34/83/47/0110.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_new_message.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_register.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_login.png
	الكود:تحديد الكود الكود: http://2img.net/s/t/21/19/57/i_icon_mini_logout.png

الخطوة الثالثة والاخيرة
اذهب الى ورقة scc
لوحة التحكم +مظهر المنتدى + الوان + ورقة scc
ثم اضف واحد من الاكواد التالية

الشكل الاول

تكبير الصورة معاينة الأبعاد الأصلية.

الكود:تحديد الكود

الكود:: /***كود scc لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ**/
.mainmenu {
   margin: 7px 0 0 0;
  }
.mainmenu {
   float:right;
   margin: 0 0 0 7px;
  }
.mainmenu {
   margin: 0;
  }

.mainmenu:hover {
  background: #428CCB;
  color: #ccc;
  }

.mainmenu {
   display:inline;
   background: #81B6BB url("http://i97.servimg.com/u/f97/19/34/83/47/3310.jpg") repeat scroll 0 0;
   width:80px;
   height:35px;
   border-bottom-right-radius: 15px;
   border-top-left-radius: 15px;
   color: #ffffff;
   font: bold 11px tahoma,verdana,geneva,lucida,"lucida grande",arial,helvetica,sans-serif;
   padding: 3px 6px;
   -webkit-border-radius: 11px;
   -moz-border-radius: 11px;
   border-radius: 11px;
   border: 1px solid #000;
   font-size: 100%;
   padding: 0.2em 0.5em;
   text-align: center;
   border : 1px dotted #F6FF00;
   border-top: medium solid #F6FF00;
   border-bottom: medium solid #F6FF00;
   padding: 2px; margin: 2px;
   }
/*-----نهايــــــة كود الازرار-----*/

الشكل الثاني منحني

تكبير الصورة معاينة الأبعاد الأصلية.

الكود:تحديد الكود

الكود:: /***كود scc لوضع ازرار المنتدى بشكل انيق ورائع وبي اي خلفية ولون تريد لجميع النسخ**/
.mainmenu {
   margin: 7px 0 0 0;
  }
.mainmenu {
   float:right;
   margin: 0 0 0 7px;
  }
.mainmenu {
   margin: 0;
  }

.mainmenu:hover {
  background: #428CCB;
  color: #ccc;
  }

.mainmenu {
   display:inline;
   background: #428CCB url("http://i97.servimg.com/u/f97/19/34/83/47/3310.jpg") repeat scroll 0 0;
   width:80px;
   height:35px;
   border-bottom-right-radius: 15px;
   border-top-left-radius: 15px;
   color: #ffffff;
   font: bold 11px tahoma,verdana,geneva,lucida,"lucida grande",arial,helvetica,sans-serif;
   padding: 2px;
   text-align: center;
   white-space: nowrap;
   border: 1px solid #000;
   font-size: 100%;
   padding: 0.2em 0.5em;
   text-align: center;
   border : 1px dotted #F6FF00;
   border-top: medium solid #F6FF00;
   border-bottom: medium solid #F6FF00;
   padding: 2px; margin: 2px;
   }
/*-----نهايــــــة كود الازرار-----*/

تم الشرح واتمنا ان ينال رضاكم

اخيرااا لتعديل على الكود ليتناسب مع استايل منتداك اتبع التالي
لتغير صورة خلفية الزر ابحث في الكود عن هذا الرابط وستبدلة برابط الصورة المناسبة لك
الكود:تحديد الكود

الكود:: http://i97.servimg.com/u/f97/19/34/83/47/3310.jpg

لتغير لون حواف الزر ابحث عن الكود التالي وستبدل اكواد الالوان بما يناسبك تجدة في اخر الكود
الكود:تحديد الكود

الكود:: border : 1px dotted #F6FF00;
border-top: medium solid #F6FF00;
border-bottom: medium solid #F6FF00;

لتغير لون الزر عند وضع موشر الفارة ابحث عن الكود التالي وستبدل كود الون بما يناسبك
الكود:تحديد الكود

الكود:: .mainmenu:hover {
  background: #428CCB;
  color: #ccc;
  }

هذا والله الموفق وبتوفيق لكم
فكرة وتصميم مسرووور
والسلام ختام

» كود css لوضع خلفية داخلية للمنتدى لجميع النسخ
» مجموعات المنتدى : خلفية ، صورة ، توهج
» كود يسمح لجميع الاعضاء والزوار بالانتقال لكافه اقسام المنتدى اثناء وجودهم فى اى قسم او اى موضوع
» تشغيل/تعطيل نظام الحماية ضد الإشهار التعسفي في المنتدى Empty تشغيل/تعطيل نظام الحماية ضد الإشهار التعسفي في المنتدى
» كود ترحيب بشكل رائع لاحلي منتدي