اضافة الوان مختلفه لادوات العمود الجانبي

السلام عليكم

من المعروف في اضافة الادوات في العمود الجانبي تظهر خلفياتها باللون الافتراضي

للاداه او بلون القالب الخاص للعمود .. وفي بعض الادوات قد يكون اللون غير مطابق

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

العرض الى عشر مشاركات واذا حددت ظهور عشر يكون المحتوى اطول مما يجعلك

ان تحدد عدد اقل احياناً لتحافظ على تنسيق القالب .

في موضوعنا هذا سوف نتحكم في الالوان الخاصه بالاداه ونجعل لكل اداه لون مختلف

وفي المحتوى الطويل نجعل مساحته محدوده باضافة الـ سكرول بار لاستعراض المحتوى .

كل ذلك باضافه بسيطه لاكواد css دون ان نستخدم اكواد الجافاسكريبت .

مثال لبعض الادوات بعد التغييرات

شرح الاضافه :

سوف اضيف في العمود الجانبي اداة المشاركات الشائعه في الصوره التاليه

حددت عدد المشاركات 10 ونسخت الـ Id الخاص بالاداه .. ثم حفظ

ملاحظه : اذا كانت الادوات  مضافه من قبل انسخ الـ Id فقط مثال الصوره 

 الان انتهيت من نسخ Id لثلاث ادوات اريد التغيير فيها " النتيجه في الصوره الاولى "

اضافة الكود :

اذهب الى لوحة التحكم اضافة اداه جافاسكريبت

الصق الكود التالي

<style type='text/css'> #PopularPosts1{ height: 200px; overflow:auto; background-image: linear-gradient(bottom, #82C777 0%, #57E0E0 66%); background-image: -o-linear-gradient(bottom, #82C777 0%, #57E0E0 66%); background-image: -moz-linear-gradient(bottom, #82C777 0%, #57E0E0 66%); background-image: -webkit-linear-gradient(bottom, #82C777 0%, #57E0E0 66%); background-image: -ms-linear-gradient(bottom, #82C777 0%, #57E0E0 66%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #82C777), color-stop(0.66, #57E0E0) ); } #Followers1{ background-image: linear-gradient(bottom, #B2B8BF 0%, #DE56D9 66%); background-image: -o-linear-gradient(bottom, #B2B8BF 0%, #DE56D9 66%); background-image: -moz-linear-gradient(bottom, #B2B8BF 0%, #DE56D9 66%); background-image: -webkit-linear-gradient(bottom, #B2B8BF 0%, #DE56D9 66%); background-image: -ms-linear-gradient(bottom, #B2B8BF 0%, #DE56D9 66%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #B2B8BF), color-stop(0.66, #DE56D9) ); } #BlogArchive1{ height: 100px; overflow:auto; background-image: linear-gradient(bottom, #E6DDDA 0%, #DEB856 66%); background-image: -o-linear-gradient(bottom, #E6DDDA 0%, #DEB856 66%); background-image: -moz-linear-gradient(bottom, #E6DDDA 0%, #DEB856 66%); background-image: -webkit-linear-gradient(bottom, #E6DDDA 0%, #DEB856 66%); background-image: -ms-linear-gradient(bottom, #E6DDDA 0%, #DEB856 66%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #E6DDDA), color-stop(0.66, #DEB856) ); } </style>
هذا السطور في الكود اعلاه هي Id اي دي الاضافات الثلاث
#PopularPosts1{
#Followers1{
#BlogArchive1{
هذة السطور هي ارتفاع الاضافة
height: 200px;
height: 100px;
 لاضافة السكرول بار للاضافات
overflow:auto;
overflow:auto;
تستطيع حذفة ان اردت 
بقية الاكواد بعد هذة السطور هي اكواد الاضافات تستطيع تغييرها باي اضافة ترغب في تلوينها
ملاحظة في الكود اعلاه ستجد
اي دي الاضافة
ارتفاع الاضافة 
سكرول الاضافة
بعدها كود الاضافة وسينتهي باي دي الاضافة الاخرى وهكذا

الى اللقاء...ابو هشام