31‏/01‏/2015


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

قبل كل شيئ أضف الكود التالي خاص بالأيقونات ضعه فوق </head> إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
1. توجه إلى قالب >> تحرير
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع الكود التالي قبله [ فوقه]
.alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#39484d;text-align: center;}
.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.alert-message span{font-size:14px!important}
.alert-message i{font-size:22px;text-align:left;display:inline-block;position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.alert-message.success{background-color:#00acd6;color:#fff}
.alert-message.success a,.alert-message.success span{color:#fff}
.alert-message.alert{background-color:#0073b7;color:#fff}
.alert-message.alert a,.alert-message.alert span{color:#fff}
.alert-message.warning{background-color:#efa666;color:#fff}
.alert-message.warning a,.alert-message.warning span{color:#fff}
.alert-message.error{background-color:#f56c7e;color:#fff}
.alert-message.error a,.alert-message.error span{color:#fff}
.alert-message.happy{background-color:#FA8734;color:#fff}
.alert-message.happy a,.alert-message.happy span{color:#fff}
.alert-message.link a,.alert-message.link span{color:#fff}
.alert-message.link{background-color:#F44242;color:#fff}
.alert-message.hi a,.alert-message.hi span{color:#fff}
.alert-message.hi{background-color:#57DF69;color:#fff}
.alert-message:hover {background-image: linear-gradient(110deg, #766D6C 0%, #606364 50%, transparent 50%, transparent 100%);background-size: 200%;background-position: 150% 0;background-repeat: no-repeat;transition: background-position .9s ease, color .15s ease;color: #eee;}
* تغيير لون الصندوق : كل كود محدد بألوان مختلفة background-color:#00acd6 هو كود اللون غيره باللون الذي تحب كهذه الألوان

4. توجه إلى موضوع قم بتحريره
5. إنتقل لتبويب HTML 
6. ضع الكود الذي تريد من بين الأكواد التالية
<div class="alert-message success">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-check-circle"></i>
  </div>
  
  <div class="alert-message alert">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-info-circle"></i>
  </div>
  
  <div class="alert-message warning">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-triangle"></i>
  </div> 
 
  <div class="alert-message error">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-circle"></i>
  </div>

<div class="alert-message happy">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-bell-o"></i>
  </div>

<div class="alert-message link">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-link"></i>
  </div>

<div class="alert-message hi">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-quote-right"></i>
  </div>
* الصناديق متتالية كما بالمعاينة لتسهيل تعريف الصندوق
* الأيقونات يمكن تغيرها عبر هذا الموقع : FnAw  وترتيبها في الصناديق كالتالي :
<i class="fa fa-check-circle"></i>
<i class="fa fa-info-circle"></i>
<i class="fa fa-exclamation-triangle"></i>
<i class="fa fa-exclamation-circle"></i>
<i class="fa fa-bell-o"></i>
<i class="fa fa-link"></i>
<i class="fa fa-quote-right"></i>

ما يتبقى عليك إلى وضع إقتباسك وها أنت ذا، نلتقي في التدوينة المقبلة.

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

قبل كل شيئ أضف الكود التالي خاص بالأيقونات ضعه فوق </head> إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
1. توجه إلى قالب >> تحرير
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع الكود التالي قبله [ فوقه]
.alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#39484d;text-align: center;}
.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.alert-message span{font-size:14px!important}
.alert-message i{font-size:22px;text-align:left;display:inline-block;position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.alert-message.success{background-color:#00acd6;color:#fff}
.alert-message.success a,.alert-message.success span{color:#fff}
.alert-message.alert{background-color:#0073b7;color:#fff}
.alert-message.alert a,.alert-message.alert span{color:#fff}
.alert-message.warning{background-color:#efa666;color:#fff}
.alert-message.warning a,.alert-message.warning span{color:#fff}
.alert-message.error{background-color:#f56c7e;color:#fff}
.alert-message.error a,.alert-message.error span{color:#fff}
.alert-message.happy{background-color:#FA8734;color:#fff}
.alert-message.happy a,.alert-message.happy span{color:#fff}
.alert-message.link a,.alert-message.link span{color:#fff}
.alert-message.link{background-color:#F44242;color:#fff}
.alert-message.hi a,.alert-message.hi span{color:#fff}
.alert-message.hi{background-color:#57DF69;color:#fff}
.alert-message:hover {background-image: linear-gradient(110deg, #766D6C 0%, #606364 50%, transparent 50%, transparent 100%);background-size: 200%;background-position: 150% 0;background-repeat: no-repeat;transition: background-position .9s ease, color .15s ease;color: #eee;}
* تغيير لون الصندوق : كل كود محدد بألوان مختلفة background-color:#00acd6 هو كود اللون غيره باللون الذي تحب كهذه الألوان

4. توجه إلى موضوع قم بتحريره
5. إنتقل لتبويب HTML 
6. ضع الكود الذي تريد من بين الأكواد التالية
<div class="alert-message success">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-check-circle"></i>
  </div>
  
  <div class="alert-message alert">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-info-circle"></i>
  </div>
  
  <div class="alert-message warning">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-triangle"></i>
  </div> 
 
  <div class="alert-message error">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-circle"></i>
  </div>

<div class="alert-message happy">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-bell-o"></i>
  </div>

<div class="alert-message link">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-link"></i>
  </div>

<div class="alert-message hi">
   مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-quote-right"></i>
  </div>
* الصناديق متتالية كما بالمعاينة لتسهيل تعريف الصندوق
* الأيقونات يمكن تغيرها عبر هذا الموقع : FnAw  وترتيبها في الصناديق كالتالي :
<i class="fa fa-check-circle"></i>
<i class="fa fa-info-circle"></i>
<i class="fa fa-exclamation-triangle"></i>
<i class="fa fa-exclamation-circle"></i>
<i class="fa fa-bell-o"></i>
<i class="fa fa-link"></i>
<i class="fa fa-quote-right"></i>

ما يتبقى عليك إلى وضع إقتباسك وها أنت ذا، نلتقي في التدوينة المقبلة.
11 Blogger تعليقات
Disqus
11 التعليقات
المشرف
avatar
Abdallah Elashry 1/31/2015
delete

http://abdallahelashry.blogspot.com/

المشرف
avatar
Abdallah Elashry 1/31/2015
delete

قالب مدونة جلال البعداني الحالي

http://abdallahelashry.blogspot.com/2015/01/blog-post_28.html

المشرف
avatar

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

{ http://arlinadesign.blogspot.com/2015/01/download-revoltify-alternate-3.html#more }

المشرف
avatar
moh kaos 2/02/2015
delete

السلام عليكم اخي حسام شككرا لك على هذا الموضوع ، لدي طلب وحيد وهو عن كيفية حفظ لون خلفية ما -div- الى مخلفات المتصفح ، اي يعني ان تبقى مخرزنة في الجهاز مثل حال قالب الهام التدوين لا يمحى اللون المختار الا اذا ازلت مخلفات المتصفح ارجوا ان ترسل لي الكود وتشرح لي الطريقة وشكرا لك :)

المشرف
avatar
ilyas_aouadi 2/02/2015
delete

شكرا على الاضافة الرائعة

http://tknielantrnat.blogspot.com/

المشرف
avatar
Ahmed Elemam 2/02/2015
delete

لماذا تظهر الاضافة هكذا واريد الحل اخى وشكرا على هذة الاضافة الرائعة

المشرف
avatar

شكرا جزيلا Hm ممكن طلب صغير وهو كود مسار التدوينات الذي بمدونتك مثل هذا وشكرا

المشرف
avatar

ها هو :





أنت تتواجد الآن بـ » الرئيسية


,

»





.breadcrumbs{
padding:5px 0px 10px 5px;
margin:0 0 8px 0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

المشرف
avatar
asd123fghasdfgh 2/09/2015
delete

السلام عليكم



سؤال : كيف اجعل النص كبير ؟؟

المشرف
avatar

شكرا لك اخي ممكن اداة مقالات ذات صلة الموجودة في مدونتك

المشرف
avatar

موضوع رائع

قوالب حصرية إضافات حصرية مواضيع حصرية

حصريا قالب عدنان ويب ونقطة ابداع وايانا تك ونجوم بلوجر وقالب عني و قالب مداد الجليد وقالب مدونة ويب نايت وقالب المشرفة حنان وقالب Social Mag معرب

http://th3geekweb3.blogspot.com

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة