رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر


إضافة رد
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 08-03-2013, 05:19 PM   #1
Abdelhak elouajdi
مدون نشيط
 
الصورة الرمزية Abdelhak elouajdi
 
تاريخ التسجيل: May 2013
الدولة: الناظور المغرب
المشاركات: 144
افتراضي كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : Abdelhak elouajdi




كيف تنشئ قائمة عمودية للأقسام الأساسية بتقنية css3



أقدم لكم شرح لعمل قائمة الأقسام الأساسية العمودية بتقنية css3









للبث الحي اضغط هنا ✔




اول شىء معنا هى أكواد ال HTML التى ستستعمل فى الأداه
والتى يمكنك من خلالها التعديل عليها كما تريد :




كود بلغة HTML:
 
   <ul> <li  > <a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه  هنا</a></li> <li > <a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه  هنا</a></li> <li > <a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png"  />عنوان الصفحه  هنا</a></li> <li > <a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه  هنا</a></li> <li > <a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png"  />عنوان الصفحه  هنا</a></li> </ul>

طبعا بعضكم يعرف فائده كل وسم ، و البعض لا يعرف فساشرح لكم معناها :


ul : هي اختصار "unordered list" وهو عنصر يقوم بوضع نقاط لكل بند في القائمة .
li : هي اختصار "list item" و هو عنصر يقوم بوضع البنود في القائمة .
a : ارتباط تشعبي، والذي يستخدم لربط من صفحة واحدة إلى أخرى .

href:خاص باستدعاء الروابط .


img : أي صورة .


بعد ذلك ، يجب علينا ان نضيف بعض خصائص الـcss التى نستطيع من خلالها ان نغير شكل
القائمه كما نريد .
كود بلغة HTML:
  
   
    #vbar  ul{list-style-type:none;list-style: none;margin:0px;padding:0px 8px 6px  8px;border-top:1px solid #d6d6d6;} #vbar ul li{background:#f8f7f7;padding:10px 10px;margin-right:  6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid  #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid  #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All  0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s  ease;transition: All 0.5s ease;} #vbar ul li:hover{background:#efefef;box-shadow:inset 0 0 2px  #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s  ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s  ease;transition: All 0.5s ease;} #vbar a{text-decoration:none;color:#2D2D2D;} #vbar a:hover{text-decoration:none;color:#037DFF;} #vbar h2{margin:8px;color:#666;border:1px solid #d6d6d6;background:  -moz-linear-gradient(top, #f8f8f8, #eaeaea);background:  -webkit-gradient(linear top, #f8f8f8, #eaeaea);background:  -ms-linear-gradient(top, #f8f8f8, #eaeaea);background:  -o-linear-gradient(top, #f8f8f8,  #eaeaea);padding:8px;font-family:'alweeam', 'Droid Arabic Kufi',  Arial,Helvetica,Sans-serif;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition:  All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s  ease;-ms-transition: All 1s ease;transition: All 1s ease;} #vbar ul li a {color:#000;font-size:12px;font-family: Tahoma,  Arial;font-weight: normal;text-decoration: none;-webkit-transition: All  0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s  ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;} #vbar .widget {   border: 1px solid #ddd;  background-color: #fff;   margin-bottom: 10px;  box-shadow:inset 0 0 4px #eee; } .menu a img {float:right;padding-left:10px;} #vbar { width:400px; height :200px; }




و فى النهايه نضيف الأكواد على بعضها لكى تكون جاهزه للاضافه الى الادوات لكى تصبح :


كود بلغة HTML:
  
        <style>#vbar ul{list-style-type:none;list-style:  none;margin:0px;padding:0px 8px 6px 8px;border-top:1px solid  #d6d6d6;}#vbar ul li{background:#f8f7f7;padding:10px 10px;margin-right:  6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid  #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid  #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All  0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s  ease;transition: All 0.5s ease;}#vbar ul  li:hover{background:#efefef;box-shadow:inset 0 0 2px  #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s  ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s  ease;transition: All 0.5s ease;}#vbar  a{text-decoration:none;color:#2D2D2D;}#vbar  a:hover{text-decoration:none;color:#037DFF;}#vbar  h2{margin:8px;color:#666;border:1px solid #d6d6d6;background:  -moz-linear-gradient(top, #f8f8f8, #eaeaea);background:  -webkit-gradient(linear top, #f8f8f8, #eaeaea);background:  -ms-linear-gradient(top, #f8f8f8, #eaeaea);background:  -o-linear-gradient(top, #f8f8f8,  #eaeaea);padding:8px;font-family:'alweeam', 'Droid Arabic Kufi',  Arial,Helvetica,Sans-serif;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition:  All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s  ease;-ms-transition: All 1s ease;transition: All 1s ease;}#vbar ul li a  {color:#000;font-size:12px;font-family: Tahoma, Arial;font-weight:  normal;text-decoration: none;-webkit-transition: All 0.5s  ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s  ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar  .widget {   border: 1px solid #ddd;  background-color: #fff;   margin-bottom: 10px;  box-shadow:inset 0 0 4px #eee; }.menu a img  {float:right;padding-left:10px;}</style>     <div id="vbar"> <ul> <li class="menu"><a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه  هنا</a></li> <li class="menu"><a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه  هنا</a></li> <li class="menu"><a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه  هنا</a></li> <li class="menu"><a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه  هنا</a></li> <li class="menu"><a href="رابط الصفحه هنا"><img  src="http://im38.gulfup.com/LmV2W.png" />عنوان الصفحه  هنا</a></li> </ul> </div>


أرجو ان تكونوا استفدتوا بالدرس و لاتترددوا فى السؤال الإستفسار في أي جزئ والجواب سيكون سريعا على هذا الرابط،



- See more at: http://www.ahramnet.com/2013/08/css3....PMAV6NJd.dpuf




__________________
نحن أشخاص من مختلف البلدان، يجمعنا عالم التدوين، لنصبح عائلة غيورين على بعضهم، ونلتقي أحيانا في منزلنا المعنون ب معهد خبراء البلوجر
AhramNet.Com

<a href="http://www.Ahramnet.com/" target="_blank" title="أهرام نت"><img src="http://AhramNet.com/WUjsb.png" border="0" alt="أهرام نت" /></a>
من مواضيع Abdelhak elouajdi

الدعم العربي

Abdelhak elouajdi غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
قديم 08-06-2013, 01:46 AM   #2
ibrachoukri
مدون نشيط
 
تاريخ التسجيل: Jun 2013
الدولة: المملكة الاسلامية المغربية
المشاركات: 153
افتراضي رد: كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : ibrachoukri





شكرا لك

الدعم العربي

ibrachoukri غير متواجد حالياً   رد مع اقتباس
قديم 08-06-2013, 01:58 AM   #3
mr.geka
مدون نشيط
 
الصورة الرمزية mr.geka
 
تاريخ التسجيل: Dec 2012
المشاركات: 161
افتراضي رد: كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : mr.geka




اضافة رااائعة شكرا لك

الدعم العربي

mr.geka غير متواجد حالياً   رد مع اقتباس
قديم 08-06-2013, 02:40 AM   #4
simo mourad
مدون جديد
 
تاريخ التسجيل: Jul 2013
المشاركات: 14
افتراضي رد: كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : simo mourad




مشكور أخي على الإضافة
__________________

من مواضيع simo mourad

الدعم العربي

simo mourad غير متواجد حالياً   رد مع اقتباس
قديم 08-06-2013, 05:51 AM   #5
ibrachoukri
مدون نشيط
 
تاريخ التسجيل: Jun 2013
الدولة: المملكة الاسلامية المغربية
المشاركات: 153
افتراضي رد: كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : ibrachoukri






شكرا لك

الدعم العربي

ibrachoukri غير متواجد حالياً   رد مع اقتباس
قديم 08-06-2013, 03:38 PM   #6
Abdelhak elouajdi
مدون نشيط
 
الصورة الرمزية Abdelhak elouajdi
 
تاريخ التسجيل: May 2013
الدولة: الناظور المغرب
المشاركات: 144
افتراضي رد: كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : Abdelhak elouajdi




لا شكر على واجب إخواني الكرام
__________________
نحن أشخاص من مختلف البلدان، يجمعنا عالم التدوين، لنصبح عائلة غيورين على بعضهم، ونلتقي أحيانا في منزلنا المعنون ب معهد خبراء البلوجر
AhramNet.Com

<a href="http://www.Ahramnet.com/" target="_blank" title="أهرام نت"><img src="http://AhramNet.com/WUjsb.png" border="0" alt="أهرام نت" /></a>
من مواضيع Abdelhak elouajdi

الدعم العربي

Abdelhak elouajdi غير متواجد حالياً   رد مع اقتباس
قديم 08-11-2013, 02:32 PM   #7
Mr Net
مدون جديد
 
تاريخ التسجيل: Aug 2013
المشاركات: 13
افتراضي رد: كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : Mr Net




قائمة رائعة أخي
بارك الله فيك
__________________
girl arcade
http://girlarcade.blogspot.com
*******
تعليم السياقة بالمغرب
http://coderoute-2013.blogspot.com
*******
ثقافة عامة
http://t9fa.blogspot.com
من مواضيع Mr Net

الدعم العربي

Mr Net غير متواجد حالياً   رد مع اقتباس
قديم 08-13-2013, 11:15 AM   #8
Abdelhak elouajdi
مدون نشيط
 
الصورة الرمزية Abdelhak elouajdi
 
تاريخ التسجيل: May 2013
الدولة: الناظور المغرب
المشاركات: 144
افتراضي رد: كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : Abdelhak elouajdi




شكرا لمرورك أخي الكريم
__________________
نحن أشخاص من مختلف البلدان، يجمعنا عالم التدوين، لنصبح عائلة غيورين على بعضهم، ونلتقي أحيانا في منزلنا المعنون ب معهد خبراء البلوجر
AhramNet.Com

<a href="http://www.Ahramnet.com/" target="_blank" title="أهرام نت"><img src="http://AhramNet.com/WUjsb.png" border="0" alt="أهرام نت" /></a>
من مواضيع Abdelhak elouajdi

الدعم العربي

Abdelhak elouajdi غير متواجد حالياً   رد مع اقتباس
قديم 08-13-2013, 06:13 PM   #9
younes spirit
مدون جديد
 
تاريخ التسجيل: Aug 2013
المشاركات: 14
افتراضي رد: كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : younes spirit




جميل مشكور --------------------:d:

الدعم العربي

younes spirit غير متواجد حالياً   رد مع اقتباس
قديم 08-13-2013, 10:38 PM   #10
likesfast4u
مدون جديد
 
تاريخ التسجيل: Aug 2013
المشاركات: 10
افتراضي رد: كيف تنشئ قائمة عمودية للأقسام الأساسية

أنا : likesfast4u




مشكور ووفقك الله

الدعم العربي

likesfast4u غير متواجد حالياً   رد مع اقتباس
إضافة رد

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

الكلمات الدلالية (Tags)
للأقسام, الأساسية, تنشئ, عمودية, قائمة


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

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

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

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
كيف اعمل قائمة مثل هذه Abdelhak elouajdi طلبات الدعم الفني 1 07-04-2013 01:23 AM
أفضل قائمة منسدلة على بلوجر (قائمة Mashable معربة) admin إضافات وأدوات بلوجر 8 06-12-2013 03:37 PM
كيف أنشئ قائمة!! Perfect طلبات الدعم الفني 1 11-08-2012 08:11 PM
طلب قائمة - يوجد مثال Youness طلبات الدعم الفني 2 11-05-2012 12:35 PM
قائمة منسندلة hassano طلبات تعديل القوالب 2 09-09-2012 07:45 PM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 12:20 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)