Archive Pages Design$type=blogging

[قياس العناصر الالكترونيه][list][rgba0, 0, 0, 0.1]

اضافه صناديق الرسائل التحذريه بتقنية ال CSS لمدونات بلوجر

صناديق CSS للاستفادة منها في عرض النصوص و الرسائل و التنبيهات بشكل جميل قصد شد الانتباه إليها و تمييزها عن باقي المحتوى لأنها دائما تكون...

صناديق CSS للاستفادة منها في عرض النصوص و الرسائل و التنبيهات بشكل جميل قصد شد الانتباه إليها و تمييزها عن باقي المحتوى لأنها دائما تكون ذات أهمية قصوى، فمثلا في مدونات بلوجر عادة ما ننبه إلى ضرورة حفظ نسخة من القالب لكن البعض يتجاهلها أو لا يراها ثم بعد ذلك يأتي ليقول "راحت المدونة خرب القالب!" :) و لكن بعد وضع التحذير في صندوق أو إطار أحمر سيكون أول ما يلمح و سيشتشعر الزائر أهمية ما كتب فيه، هذه فائدة أولى و يمكنك ابتكار الباقي :) .  طريقة التركيب واحدة في بلوجر ، ووردبريس، أو أي موقع آخر ...
مثال لصناديق محدبة الزوايا (خصائص css3)

مثال لصناديق css عادية



لتستعملها في تدويناتك أو صفحات موقعك يكفي أن تزرع كود css الخاص في قالب موقعك أو مدونتك، مثلا في بلوجر نضع كود css قبل ]]></b:skin> من صفحة تحرير html، و في ووردبريس نزرع الكود نفسه في ملف style الموجود في مجلد القالب المستعمل و نفس الطريقة صالحة لباقي المواقع ...



/*MESSAGE BOX WITH ICONS*/
.msg-box, .ok-box, .success-box, .warning-box, .error-box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; 
}
.msg-box{
border:solid 1px #8e8e04; 
background:#FFFFCC url(images/msg.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.ok-box{
border:solid 1px #27739d; 
background:#94d5fb url(images/ok.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.success-box{
border:solid 1px #90ac13; 
background:#eef4d3 url(images/success.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.warning-box{
border:solid 1px #ba4c0e; 
background:#ffcaa4 url(images/warning.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}
.error-box{
border:solid 1px #dc2727; 
background:#f2abab url(images/error.png) 97% 6px no-repeat;
color:#222222;
padding:6px;
text-align:center;
}


/*MESSAGE CSS BOX*/
.yellow-box{
border:solid 1px #8e8e04; 
background:#FFFFCC;
color:#222222;
padding:6px;
text-align:center;
}
.blue-box{
border:solid 1px #27739d; 
background:#94d5fb;
color:#222222;
padding:6px;
text-align:center;
}
.green-box{
border:solid 1px #90ac13; 
background:#eef4d3;
color:#222222;
padding:6px;
text-align:center;
}
.orange-box{
border:solid 1px #ba4c0e; 
background:#ffcaa4;
color:#222222;
padding:6px;
text-align:center;
}
.red-box{
border:solid 1px #dc2727; 
background:#f2abab;
color:#222222;
padding:6px;
text-align:center;
}

طبعا يجب استبدال روابط الصور في الكود بعد رفعها على موقعك و تجدها ملحقة بالمثال المتاح للتحميل في نهاية الموضوع. أما مستعملي بلوجر فيمكنهم إعادة رفعها أو استعمال هذا الكود المرفوعة صوره مسبقا على بلوجر بدل الأول.
الآن و قد زرعنا كود css في القالب سنرى كيف سندرج الصناديق الملونة في مواضيعنا أو على صفحات موقعنا. الأمر بسيط جدا سنستعمل كود HTML الآتي :

<div class="ok-box">أنا رسالة داخل صندوق أزرق</div>
و سيبدو كالآتي:
أنا رسالة داخل صندوق أزرق

طبعا ok-box تميز الصندوق الأزرق ذو الأيقونة، إن أردت استعمال صندوق آخر ما عليك سوى استبدالها بأخرى مميزة للصندوق المطلوب. مثلا صندوق الخطأ الأحمر تميزه error-box و صندوق التحذير البرتقالي تميزه warning-box ... باقي التخصيصات


التعليقات

أترك تعليق
الاسم

آخر أخبار الإنترنت و التكنولوجيا ابتدائى لاب توب ابلAPPLE اتصالات احترف فك وتركيب الشيب أخبار اخبار اخبار المازربورد ادسنس أدوات مفيده أصول التدوين اضفات بلوجر أضفات ووردبريس اعطال اسر ACER اعطال اسوس اعطال توشيبا اعطال ديل DELL اعطال لينوفLENOVE اعطال HP اعطالSamsung الادوات المستخدمه فى الصيانه الإكترونيات الإنترنت الانترنت الإنفوغرافيك التدوين التسويق الألكترونى التسويق الالكترونى التصميم الداتا شيت الربح من الانتر نت العدد و ادوات الصيانه العمل على الانترنت القسم العام الكترونيات المنهج الاساسى لااحتراف صيانه الكمبيوتر المواقع و المدونات الهارد ديسك أندرويد انفرادات المدونه ايسهات io برامج اندرويد بلوجر تتبع الاعطال تحميل البرامج و الملفات تصميم مواقع الانترنت تغير شاشات تق تقنيه توشيبا حصريات دروس احتراف اللاب توب دروس تتبع اعطال اللاب توب دروس فى الماذر بورد دروس متنوعه دعم فنى طمان سينتر دوره الإلكترونيات دوره الصيانه الالكترونيه دوره حمايه الاجهزه دون لود ريادة الأعمال سامسونج سوفت وير سيو سيو | SEO شركات التكنلوجيا صناعة الويب صناعه الويب فديوهات فديوهات صيانه متنوعه فرى لانسر فلاشات قسم الاب توب قسم البايوس قسم العدد و الادوات الخاصه با الصيانه قسم اللاب توب قسم المازربورد قسم المخططات قسم المخططات و الصور عاليه الدقه قسم فديوهات المازر بورد قسم LCD قصص نجاح قوالب بلوجر قياس العناصر الالكترونيه كاميرات المراقبة كتب الصيانه با العربيه كيف و اخوتها مازر مخططات مخططات اللاب توب مرجعات أضفات ووردبريس مسبقات مسلم فيس مشاكل الماذربورد معدات الصيانه مقالات مكتبه اعطال اللاب توب المحلوله مناقشات ووردبريس ويندوز يوتيوب about us Android EC BIOS Fujistu google i/o led seo tablet
false
rtl
item
شبكة محمد طمان التعليمية: اضافه صناديق الرسائل التحذريه بتقنية ال CSS لمدونات بلوجر
اضافه صناديق الرسائل التحذريه بتقنية ال CSS لمدونات بلوجر
http://2.bp.blogspot.com/-9OrSVwSREek/Umb5E9PjGrI/AAAAAAAAAM0/-OZoXFVtNwU/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D9%87+%D8%B5%D9%86%D8%A7%D8%AF%D9%8A%D9%82+%D8%A7%D9%84%D8%B1%D8%B3%D8%A7%D8%A6%D9%84+%D8%A7%D9%84%D8%AA%D8%AD%D8%B0%D8%B1%D9%8A%D9%87+%D8%A8%D8%AA%D9%82%D9%86%D9%8A%D8%A9+%D8%A7%D9%84+CSS+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png
http://2.bp.blogspot.com/-9OrSVwSREek/Umb5E9PjGrI/AAAAAAAAAM0/-OZoXFVtNwU/s72-c/%D8%A7%D8%B6%D8%A7%D9%81%D9%87+%D8%B5%D9%86%D8%A7%D8%AF%D9%8A%D9%82+%D8%A7%D9%84%D8%B1%D8%B3%D8%A7%D8%A6%D9%84+%D8%A7%D9%84%D8%AA%D8%AD%D8%B0%D8%B1%D9%8A%D9%87+%D8%A8%D8%AA%D9%82%D9%86%D9%8A%D8%A9+%D8%A7%D9%84+CSS+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png
شبكة محمد طمان التعليمية
https://tamancenter.blogspot.com/2013/10/css_22.html
https://tamancenter.blogspot.com/
https://tamancenter.blogspot.com/
https://tamancenter.blogspot.com/2013/10/css_22.html
true
1513737640727675977
UTF-8
لم يتم العثور على أي مشاركات شاهد الكل أقراء المزيد رد الغاء الرد حذف بواسطة الرئسية الصفحات المقالات مشاهدة الكل موصى به لك التسمية الارشيف البحث Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago