| 63 تعليقات ]

بسم الله و الحمد لله و الصلاة و السلام على رسول الله محمد الأمين. السلام عليكم و رحمة الله. إخواني الكرام أقدم لكم اليوم صناديق 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
نسألكم الدعاء!


التعليقات : 63

محمد زيداني

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

Abd-alrhman

ميزه حلوه

مشكور

Mustafa

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

نسيت أن تضيف 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/

المقداد

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

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

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

admin

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

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

غير معرف

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

khaled

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

راكان صالح

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

محمد غراب

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

عزيز

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

Ahmad

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

Wizzo

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

غير معرف

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

khaled

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

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

Unknown

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

memo

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

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

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



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

محمد

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

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

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

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

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

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

غير معرف

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

سارة العطار

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

أحمد رمضان

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

محمد

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

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

تحياتي.

AhMeD MoHaMeD

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

مميز مميز

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

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

حمودي

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

شكرا لك


http://bhamodi.blogspot.com

وظائف

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

Crochet Beirut

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

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/
مشكووووووووووووووور

المشاغب أبوزياد

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

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

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

http://nasheralhaq.blogspot.com

Bassem

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

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

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

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

و شكراً لك

احمد حجازي

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

CSS message box for blogger

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

غير معرف

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

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

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

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

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

غير معرف

merci

غير معرف

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

Unknown

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

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

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

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

Asma Rahmouni

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

غير معرف

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

اخى محمد

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

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

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

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

http://www.shabab4allah.tk/vb

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

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

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

محمد

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

غير معرف

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

غير معرف

شكرا جزيلا

غير معرف

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

mid4up

Unknown

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

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

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

Unknown

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

entrümpelung wien

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

Bradley Fernandez

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

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

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

Unknown


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

وظائف خالية

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

Unknown

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

Unknown

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

Unknown

Good http://www.fancy10.eu

seaf

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

hay

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

Admin

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

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

إرسال تعليق


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

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

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