اضف لسايد بار مدونتك الوان جميلة جدا

15‏/06‏/2010
بسم الله الرحمن الرحيم
اخواني الكرام انا سابقا وعدت بأن اقدم اضافات ودروس ولكني قدمة بعض الأضافات ولكني لم اقدم دروس تطوير المدونة وفي هذا التدوينة سأفوي بالعهد وسأقدم درس اتوقع انه سيلقى استحسانكم اخواني الكرام سأقدم اضافة تضيف على المدونة او قالب المدونة لمسة جميلة من الأوان وهاذه الأضافة متعلقة بالسايد بار لأنه تضيف لون لكل اداة بشكل جميل وجذاب
http://fc25.deviantart.com/fs13/f/2007/101/0/0/Rainbow_Concepts_V__by_jugga_lizzle.jpg
 واضفت هذا الدرس لأني قرات عدت اسئلة وعدت اسفسارات عن هذا الأمر وخصوصا في مدونة الرافدين الرائعة التي يكتبها احمد ولأسئلة كانت في تدوينة تقسيم التصنيفات الى قسمين في بعض الأخوان سؤلوه عن الأضافة هاذه فقال انها شبيها بنفس كود التقسيم ولذلك لأخ احمد له ايضا فضل بهذا الدرس والحمد لله بفضل الأخت سهام صاحبة مدونة قرطاسية نت التي اعطتني الكثير من الأمور التي تتعلق في اكواد css الذي هو اصل هاذه الأضافة انا اطلت عليكم بالمقدمة لنبدء بالشرح قبل الشرح :.

لمعاينة الأضافة والدرس اضغط هنا



لنبداء الأن بالشرح
اذهب الى المسار التالي
لوحة التحكم الرئيسية>تخطيط/تصميم>تحريرhtml
*/مهم\*
احفظ القالب لتفادي اي مشاكل لأسترجاعه عند الحاجة.

اضغط cntrl+f للبحث عن الأكواد ابحث عن هذا الكود
]]></b:skin>
 
واضف اعلاه اي فوقه مباشرة  اضف هذا الكود 

#LinkList1 {
color:#E41B17;
}
#LinkList1 h2 {
background-image:url('http://i47.tinypic.com/f38knk.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#LinkList1 a {
color:#E41B17;
}
#LinkList2 {
color:#717D7D;
}
#LinkList2 h2 {
background-image:url('http://i47.tinypic.com/2zemseh.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#LinkList2 a {
color:#717D7D;
}
#LinkList3 {
color:#ECD872;
}
#LinkList3 h2 {
background-image:url('http://i48.tinypic.com/9h59jm.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#LinkList3 a {
color:#ECD872;
}
#HTML1 {
color:#8D38C9;
}
#HTML1 h2 {
background-image:url('http://i49.tinypic.com/23u613o.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#HTML1 a {
color:#8D38C9;
}
#HTML2 {
color:#1589FF;
}
#HTML2 h2 {
background-image:url('http://i50.tinypic.com/6favyp.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#HTML2 a {
color:#1589FF;
}
#HTML3 {
color:#C8BBBE;
}
#HTML3 h2 {
background-image:url('http://i48.tinypic.com/wuqvxl.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#HTML3 a {
color:#C8BBBE;
}
#Label1 {
color:#717D7D;
}
#Label1 h2 {
background-image:url('http://i47.tinypic.com/2zemseh.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#Label1 a {
color:#717D7D;
}
#Feed1 {
color:#E41B17;
}
#Feed1 h2 {
background-image:url('http://i47.tinypic.com/f38knk.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#Feed1 a {
color:#E41B17;
}
#Feed2 {
color:#1589FF;
}
#Feed2 h2 {
background-image:url('http://i50.tinypic.com/6favyp.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#Feed2 a {
color:#1589FF;
}
#BlogArchive1 {
color:#C031C7;
}
#BlogArchive1 h2 {
background-image:url('http://i49.tinypic.com/23u613o.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#BlogArchive1 a {
color:#C031C7;
}
#Followers1 {
color:#726E6D;
}
#Followers1 h2 {
background-image:url('http://i48.tinypic.com/wuqvxl.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#Followers1 a {
color:#726E6D;
}
#Profile1 {
color:#717D7D;
}
#Profile1 h2 {
background-image:url('http://i47.tinypic.com/2zemseh.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#Profile1 a {
color:#717D7D;
}
#Image1 {
color:#FDD017;
}
#Image1 h2 {
background-image:url('http://i48.tinypic.com/9h59jm.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#Image1 a {
color:#FDD017;
}
#Text1 {
color:#717D7D;
}
#Text1 h2 {
background-image:url('http://i47.tinypic.com/2zemseh.gif');
color:#ffffff;
padding:10px 6px 0 0;
height:20px;
font-size:15px;
}
#Text1 a {
color:#717D7D;
}
اخواني الكرام بعض الملاحظات المهمة:.
الأدوات التي سيحدث عليها التغير
1-LinkList3 - LinkList2 - LinkList1. (قائمة الروابط)

2-HTML3 - HTML2 - HTML1. (اكواد الجافا سكربت)

3-Label1 (التصنيفات).

4- Feed2 - Feed1 (التغذية التدوينات تغذية التعليقات)

5-BlogArchive1 (الأرشيف)

6-Followers1 (المتابعون)

7- Profile1 (الوضع اي من انا )

8- Image1 (صورة)

9- Text1 (نص)

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

4 تعليق على اضف لسايد بار مدونتك الوان جميلة جدا

محمد بهجت يقول... @ 26 يونيو 2010 في 7:58 م

مشكور ويتم الآن التجربة

مهند ناصر يقول... @ 27 يونيو 2010 في 8:35 ص

اهلين اخي محمد شرفت المدونة

a يقول... @ 8 يوليو 2010 في 5:10 م

بارك الله فيك اخي مهند على هذه الأضافة الرائعة

مهند ناصر يقول... @ 8 يوليو 2010 في 7:26 م

مرحبا اخي مجتبي وشكرا على المرور .

إرسال تعليق