إنضمامك إلي منتديات استراحات زايد يحقق لك معرفة كل ماهو جديد في عالم الانترنت ...

انضم الينا
استراحات زايد الصفحة الرئيسية


 
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 07-21-2014, 10:20 PM
عضو ماسي
بيانات محروم.كوم
 رقم العضوية : 503
 تاريخ التسجيل : Dec 2007
الجنس : female
علم الدوله :
 المشاركات : 2,100,669
عدد الـنقاط :3341
 تقييم المستوى : 2140

السلام عليكم ورحمة الله وبركاته، أقدم لكم اليوم قوائم رائعة لمدونات بلوجر وهي من تصميم موقع CSSmenuMaker.com وقمت بتعريبها وجمعها في كود واحد حتى يسهل إضافتها على مدونات بلوجر حتى للمبتدئين. وقد تم تصميم هذه القوائم ب CSS و jQuery بحيث نقوم بالنقر على عنوان بقوائم ثانوية فتظهر القوائم الثانوية المخفية منسدلة بشكل جميل.

نموذج القوائم:


بإمكانكم مشاهدة مثال للقوائم من هنا وللراغبين في إضافة هذه القوائم على مدونات بلوجر خاصتهم تابعوا معنا هذه الخطوات.


- الخطوة 1:
من واجهة المتدونة تختارون التخطيط ثم إضافة أداة، وبعد ذلك تختارون HTML/Javascript:

- الخطوة 2:
داخل إطار الأداة ستقومون بلصق الكود التالي:

رمز Code:





@import url(http://fonts.googleapis.com/css?fami...:400,600,300);
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {



line-height: 1.3;
}
#cssmenu {
width: 250px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #bd0e36;
color: #ffffff;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
position: relative;
}
#cssmenu > ul > li > a > span {
background: #ed1144;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #bd0e36;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #ed1144;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #bd0e36;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #fff;
}




- الخطوة 3:
قوموا بحفظ التغييرات بعد تغيير القوائم بحسب حاجتكم. وستلاحظون ظهور قوائم جانبية جميلة ورائعة ب ب CSS و jQuery لمدونة بلوجر الخاصة بكم.

الدرس منقول عن مدونة فلفلاي Folfoly
:strongly: المرجو لكل من نشر الدرس على مدونة أخرى أو منتديات أخرى ذكر المصدر وأتمنى صادقا أن ينال هذا الدرس إعجابكم.
__DEFINE_LIKE_SHARE__
رد مع اقتباس
 

مواقع النشر (المفضلة)

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ jquery ] تعلم JQUERY بالعربية و في 2 ساعات الان و حصريا على ترايدنت Traidnt محروم.كوم منتدى أخبار المواقع والمنتديات العربية والأجنبية 0 05-25-2014 03:10 PM
[ jquery ] اظهار كلمة السر واخفائها بواسطه checkbox jquery محروم.كوم منتدى أخبار المواقع والمنتديات العربية والأجنبية 0 03-05-2014 02:30 PM
[ فيديو ] عمل قائمة منسدلة JQuery + CSS محروم.كوم منتدى أخبار المواقع والمنتديات العربية والأجنبية 0 03-01-2014 05:00 AM
[ jquery ] إضافة مربع نص بشكل حيوي باستخدام Jquery محروم.كوم منتدى أخبار المواقع والمنتديات العربية والأجنبية 0 08-30-2013 08:10 PM
[طلب] شرح إنشاء قوائم منسدلة ب css محروم.كوم منتدى أخبار المواقع والمنتديات العربية والأجنبية 0 10-09-2011 07:00 PM


الساعة الآن 01:46 AM


Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By Almuhajir

RSS RSS 2.0 XML MAP HTML