| 70 تعليقات ]

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


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

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

كود css
/*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 ... باقي التخصيصات توضحها هذه الصورة.
للاستئناس أكثر يمكنكم استعراض الصناديق أو تحميل القن المصدري.




اعتمادا على هذه الصناديق يمكنك ابتكار تشكيلات اخرى باستبدال الأيقونات و الألوان ...
روابط استفدت منها في كتابة الموضوع:
 CSS Message Box collection
أيقونات Xiao المجانية مقدمة من  Neversay
نسألكم الدعاء!


التعليقات : 70

Zidani

شكرا جزيلا اخي ذؤيب, إضافة جميلة لمدونات البلوجر .

Abd-alrhman

ميزه حلوه

مشكور

šчитαχ_eяя

الله يجزاك خير على جهدك :) وبارك في علمك ,,,

نسيت أن تضيف padding بسيطة من جهة الصورة لكي لا يأتي النص فوق الرمز :)


الله يوفقك للي فيه الخير ., دمت بود ,,,


بعد إذنك :
قمت بعمل "optimization" بسيط للكود لإستعماله في مدونتي , كالتالي :


.box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: 97% 6px no-repeat;
border:solid 1px;
text-align:center;
color:#222222;
padding:6px;
}
.msg-box{background-image:url(images/msg.png);}
.blue-box{border-color:#27739d; background-color:#94d5fb;}


ويتم تطبيق السمات مجتمة بالشكل التالي :
class='box blue-box msg-box'

ذؤيب

مرحبا بكم إخواني الكرام و شكرا لكم على طيب الزيارة.
أخي šчитαχ_eяя
صدقت أخي ، إذا كنت ستستعمل الصناديق لعرض نص طويل فضروري أن تجعل ال padding من جهة اليمين كبير قرابة 30px أو 40px تركت ذلك لك لتجد القيم التي تناسبك ذلك أن الصورة (الأيقونة) الموجودة في الخلفية مموضعة بالنسبة المائوية جهة اليمين لذلك فستختلف القيم و النسب حسب أبعاد ال container .
تحياتي و شكرا لك على الإضافة.

المقداد
أزال المؤلف هذا التعليق.
أبو إياد

شكرا صديقي العزيز محمد ، هذه الاضافة مميزة جدا ،تستحق التجريب مع تحيات أبو اياد
http://abu-iyad.blogspot.com/

المقداد

اضافة مفيدة للجميع ولا اخفي اني كنت قد احتجتها عند غيابي عن المدونة .. والأخ احمد العزاوي كان قد صمم لي مثلها للتنبيه في المدونة سابقاً

بارك الله فيك أخي محمد

ارسلت لك رسالة في عرب بلوقر .. !

خالد أبجيك

بارك الله فيك أخي ذؤيب على ما تقدمه من مساعدات للمدونين.. وأسأل الله تعالى أن يجعله في ميزان حسناتك.. آمين..

كنت هنا.. وسأبقى دوما..

أوعمارة تكفريناس

السلام عليكم و رحمة الله و بركاته أخي دؤيب أردة الاتصال بك لكن لم أجد كيف أراسلك لأنني أحتاج مساعدتك ادا أردة و هي كيف أرفع عدد المواضيع من 3 الى 5 مواصيع في الصفحة الرئيسية

khaled

شكراً أخي الكريم عمل متقن وجميل وقد سرني التواصل معك وأنشاء الله لن تكون المرة الاخيرة
واليوم اعجبت كثيرا بتصميمها الهادئ الجميل، وعلى الفور توجهت الى اسفل المدونة لأرى سرعتها
فماشاء الله
تسلسل رائع و ضهور مميز للمواضيع
بالنسبة لموضوع اليوم فهو مميز
لكن ينقصه بعض التأثيرات
أعدك أني لو توفر لي الوقت فسوف أدمجه بتقنية الجيوكري
تحياتي لك ولزوار مدونتك الكرام

راكان صالح

إضافة فعلاً مميزة, وجميلة في نفس الوقت
بارك الله فيك

محمد غراب

الله يوفقك, اضافة رائعة.

عزيز

جميل اح دؤيب ما قدمت
جار التجريب وان شاء الله تنجح لانني غبي في هدا المجال

Ahmad

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

MyAlge - مدير الموقع

شكرا جزيلا اخي دؤيب
لكن قمت بزرع ملف الcss عن طريق اداة التصميم الجديدة من جوجل و نجحت بالفعل شكراااااااااا جزيلا

مدونة توك شو

تسلم اخي محمد اضافه رائعه ودائما ماتفيد مدوناتنا باضافاتك
http://www.2kshow.com/

khaled

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

ثاتير مميز بتقنية الجيوكري

Philonoist

أخي ذؤيب
أريد عمل صندوق واحد لونه أحمر ( صندوق التحذير )
مكتوب فيه ( رابط الكتاب لا يعمل ؟ اضغط هنا ) ويتم ربطه بهذا الرابط http://boo-city.blogspot.com/2010/05/blog-post_10.html
وحبذا لو كان بنفس أبعاد صندوق | تحميل HTML | الموجود بآخر هذا الموضوع
شكراً لك

محمد الغديفي

جزاك الله خير أخي

ممكن الكود الجاهز لبلوجر

لأن الرابط إلي حطيته عطلان



((أما مستعملي بلوجر فيمكنهم إعادة رفعها أو استعمال هذا الكود ))

ذؤيب

مرحبا بكم إخواني الكرام و شكرا لكم على طيب الزيارة.

أخي أوعمارة يمكنك التواصل معي عبر المسنجر nsr_racer@hotmail.com

أخي khaled شكرا لك أخي تاثير جميل جدا يمكن استعماله كتنبيه سريع عند
دخول الزوار إلى الموقع، حبذا لو تدرجا شرحا لذلك في مدونتك سيكون أفضل.

أخي Philonoist اتبع الشرح في الموضوع و في كود css الخاص بصندوق التحذير أضف width: 125px;
و إن واجهت صعوبة في ذلك يمكنك طرح استفسارك في منتدى بلوجر و هناك سأجيبك بالتفصيل الممل.

أخي محمد الغديفي آسف لم أنتبه للأمر :) لقد اعدت رفع الكود يمكنك تحمبله و فتحه بالمفكرة.

تحياتي للجميع.

غير معرف

شكراً جزيلاً لكم جميعاً
ولكن صراحة لم تنجح الطريقة مع أني طبقتها 100%
غريب ؟؟؟؟؟؟؟؟؟
هل من اقتراحات ؟؟؟؟؟؟؟؟

sossi

جزاك الله خيرا

أحمد رمضان

اوبس :)
مشكور أخي ولكن اعتقد ان هذا المربع يمكن عملة بشفرات أقل من هذا بكثييييييير

ذؤيب

مرحبا بكم إخواني الكرام و شكرا لكم على طيب الزيارة.
أخي "غير معرف" حبذا لو أرفقت مثالا لتطبيقك لنعاين المشكل.

أخي أحمد رمضان كود css المدرج في الموضوع ليس لمربع واحد بل لعشرة مربعات تختلف في الشكل و الألوان و الأيقونات :) أما إن كنت تقصد أنه يمكن عمل هذا بأكواد أقل فأهلا و سهلا بتوجيهاتك لنتعلم مما علمك الله.

تحياتي.

»Sasuke Uchiha«

والله يعجز اللسان عن وصف ابداعك

مميز مميز

وتم التجربه وممييزه حقا

سلمك الله من كل شر

حمودي

جزاك الله الف خير اضافة جميلة ورائعى لتسريع التصفح

شكرا لك


http://bhamodi.blogspot.com

mohi

مشكور على المعلومات المفيدة
/http://egyptian-government.blogspot.com
http://cairo-job.blogspot.com/
http://m-sehaty.blogspot.com/

moumaiazoun

جزاك الله خيرا"
دلوقت مش مستوعبة قوي بس حقرا تاني عشان افهم اكتر
جديدة بقى ومخي مقفل ...........استحملني

top car team

thank you

مايكروسوفت

سلمت يداك على الشرح يا محمد

http://bramj-web.blogspot.com/

مشكووووووووووووووور

http://bramj-web.blogspot.com/

http://bramj-web.blogspot.com/

http://bramj-web.blogspot.com/
مشكووووووووووووووور

Abo-zyad.blogspot.com

مشكوووووووووووووور اخي علي الاضافه بس كان ليه طلب ازاي اعمل صندوق للكود في نص الرساله

مدونة ناشر الحق

مشكوووور و ما قصرت اخوي

http://nasheralhaq.blogspot.com

Bassem

اخي العزيز بداية احب ان اشكرك على كل ما تقوم به من مجهود و شكراً لك

انا صاحب مدونة بلوجو
http://b-blogo.blogspot.com/

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

بينما عندك هنا اطرافة دائرية و لا يأخذ الصفحة كلها مثال
http://b-blogo.blogspot.com/2011/02/picture-of-day.html

و شكراً لك

ahmed

شكرا ياغالى تسلم ايدك

CSS message box for blogger

اخي العزيز بداية احب ان اشكرك على كل ما تقوم به من مجهود و شكراً لك، أنا صاحب مدونة http://the-professional-blog.blogspot.com/ و ساعدتني تدوينتك في إضفاء رونق جميل على رسائل مدونتي حتى أنني قد اقتبست منك ما ساعدني في انجاز هذه التدوينة و التي هي ترجمة لتحفتك هذه، شكرا لك و جزاك الله عنا خيرا

ємιηєм

حقيقي الفكره جميل وتسلم ايدك بجد

بس انا عندي في مشكله

المدونه لا تقبل كود div

ولما اكتبها في تعليق لا تقبل

ولما اكتبها في موضوع تنزل بشكل كود وليس مربع

غير معرف

merci

غير معرف

@Abd-alrhman يبسبسيبيسب

Med-anass-sdk

رائع أعجبني
شكرا

عبدالله باخريصة

رائع أخي ذؤيب.. لكن لدي سؤال: أين بالضبط يمكنني وضع الأكواد في ملف الاستايل للورد بريس؟؟
يعني هل هناك مكان مخصص أم في نهاية الملف أم أين؟؟

أتمنى منك الإفادة أخي ذؤيب.. ولك الشكر،،،

مملكة الحب

توبيكات
برامج
صور
العاب

أسماء || أم نضال ||

بارك الله وجزاك خير الجزاء ..

غير معرف

السلام عليكم ورحمة الله وبركاته

اخى محمد

قمت بتركيب الإضافة كماهو مطلوب

ولكن لم تظهر الرسالة فى صندوق وإنما ظهرت كلام عادى

برجــاء المساعدة اخى الحبيب

هذا هو رابط الموقع

http://www.shabab4allah.tk/vb

أسأل الله ان يجعله فى ميزان حسناتك

برامج كمبيوتر

قمة الروعـة , تسلم ايديك , اكواد في قمة الجمال بجد , في انتظار المزيد .

محمد

شكرا بارك الله فيك اخي
نجوم العراق
العاب
هكر يميل
برامج
منتدى نجوم
منتدى الامن والحماية
نجوم
العراق
المنتدى العام
منتدى الكمبيوتر
منتدى برامج الكمبيوتر
منتديات نجوم العراق

غير معرف

شكرااااااااااااااا
اخي
الله يعزك

غير معرف

شكرا جزيلا

غير معرف

شكرا ياغالى تسلم ايدك

mid4up

Mohammed Fellak

إضافة جميلة جدا ..
كما أني أضفتها كخاصية إقرأ المزيد
للمشاهدة
www.progwd.net

قوالب بلوجر عربية ومجانية

شكرا على الشرح.
لمن يرغب في تحميل قوالب بلوجر احترافية ومجانية : قوالب بلوجر عربية ومجانية

اخبار اليوم

تسلم ايديك على الموضوع
اخبار اليوم-اخبار مصر

اخبار اليوم

تسلم ايديك على الموضوع
اخبار اليوم-اخبار مصر

hamza ramdi

شكرا لك على الإضافة والله مفيذة وكنت أبحث عنها منذ يومين
لاتنسوا زيارتي في مدونتي http://cafe-arb.blogspot.com

entrümpelung wien

شكرا على الموضوع
entrümpelung
umzug
Räumung
Kleintransport Wien
Wohnungsräumung Wien
botendienst Wien

ابراهيم اوليلي

يعطيك العافية
http://toppreparation.blogspot.com/

Ell top

شكرا على الموضوع
BookMark
BookMark
BookMark
BookMark

مدونة قرآنيات

جميل جدا
بارك الله فيك

ahmed mavo


صور حب 2013
صور رومانسية
فساتين سهره طويل
اغلفه فيس بوك
اغلفة للفيس بوك
اغلفه للفيس بوك رومانسي
صور انا احب لجميع الحروف
احدث ازياء 2013 اجدد ملابس 2013
اغلفه للفيس بوك رومانسي بناتي 2013
فساتين سهره قصيره جديده 2013
مدونه ازياء النسائيه
احدث موض فساتين زفاف
صور فساتين سوريه
عابايت جديده اخر موضه
ازياء جواكيت شتوية 2013
اجمل شنط يد عصرية 2013
مجوهرات راقية 2013
اجمل خواتم زواج 2013
صور مجوهرات ديور 2013
اجمل جوارب نسائية

ahmed mavo


دردشة بنات مصرية
لعبه تلبيس البطريق
لعبه قص الاضافر
لعبة الحرب الجديده 2013
لعبه سوبر ماريو الجديده
لعبه المزرعه السعيده
لعبه الدررجات انااريه 2013
لعبه العربيات الجديده
تحميل لعبه توم واجيري 2013
لعبة حرب الدبابات 2013
لعبه حرامي السيارات
لعبه سوبر ماريو الجزء الثاني
لعبة الجراج الجديده
لعبة سوبر ماريو القديمه
لعبه اسبونج بوب 2013
لعبه مايك اب للبنات فقط
لعبه تلبيس للبنات فقط
لعبه تكن
العاب تلبيس للبنات
لعبه تلبيس حقيقي

ahmed mavo


لعبه تلبيس باربي للصغار
لعبه تلبيس العروسه للبنات فقط
ميك اب ورسم حواجب للبنات فقط
لعبه تلبيس العروسة و تصورها
لعبه المطعم 2013
لعبه تلبيس للبنات فقط
لعبة الرجل الاخضر الجديده
العاب فلاش للبنات فقط
اكسسوارات جديده
شنط واحذيه
الصحه
انتريهات و غرف نوم
اغلفه الفيس بوك
صور 2013
قصص
غريبه و عجيبه
ملابس 2013
كوميكس فيس بوك
المنوعات

وظائف خالية

شكراا لك أخي تمت بنجاح 100%

غير معرف

موضوع متميز جدا , شكراً لك عزيزي
وهذا موقع جيد جدا للافلام ..

مشاهدة فيلم The Host
فيلم The Host
فيلم The Host اون لاين

مشاهدة فيلم Sexy Evil Genius
فيلم Sexy Evil Genius
فيلم Sexy Evil Genius اون لاين

مشاهدة فيلم Identity Thief
فيلم Identity Thief
فيلم Identity Thief اون لاين

مشاهدة فيلم Dark Skies
فيلم Dark Skies
فيلم Dark Skies اون لاين

omar hassan

لم تعمل معى ارجوك انى احتاجها جدا

موفق ياسين

شكرا صديقي العزيز محمد ، هذه الاضافة مميزة جدا ،تستحق التجريب مع تحيات موفق ياسين
http://in3pr.blogspot.com/

hamz benmalek

Good http://www.fancy10.eu

seaf

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

Haytam Toutouh

هل يشتغل على وورد بريس

Abd-Elrahman hassan

جميل جدا شكرا لك اخي العزيز

اعلانات مبوبة

إرسال تعليق


يمكن استخدام بعض علامات HTML، مثل <b>, <i>, <a>

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

» معرض قوالب بلوجر مدونة لعرض أفضل القوالب المطروحة على معهد خبراء بلوجر : منتدى خاص بالبلوجر لتبادل الخبرات بين مدوني البلوجر ومشاركة القوالب العربية والمعربة أو الأجنبية إضافة إلى التبادل الإعلاني وطرق الربح عن طريق مدونات بلوجر.