إضافة ملاحظات و تنبيهات دلخل التدوينة

إضافة ملاحظات و تنبيهات دلخل التدوينة
السلام عليكم و رحمة الله وبركاتو
في هذه التدوينة اقدم لكم إضافة جميلة و مميزة تزيد من مظهر تدويناتكم جملاً
هذه الإضافة عبارة ملاحظات و تنبيهات تستطيع من خلالها جذب انتباه القارئ لنقطة أو شيء معين داخل موضوعك أو تدوينتك
أترككم مع معاينة مباشرة للإضافة


كيفية إضافة الاداة
قم بالبحث عن الوسم </head>  
وضع فوقه/قبله الكود التالي,وهو الكود الخاص بالأيقونات إذا كان موجوداص لديك فلا داعي لإضافته
 <link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/> 

قم بالبجث عن الوسم ]]></b:skin>
و ضع الكود التالي فوقه/قبله
 .alert-message{position:relative;display:block;background-color:#fafafa;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#2f3239;border:1px solid}
.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#2f3239}
.alert-message span{font-size:14px!important}
.alert-message i{font-size:22px;text-align:right;display:inline-block;
position:absolute;left:0;top:0;padding:20px;opacity:0.8;}
.alert-message.success{background-color:#f1f9f7;border-color:#e0f1e9;color:#1d9d74}
.alert-message.success a,.alert-message.success span{color:#1d9d74}
.alert-message.alert{background-color:#DAEFFF;border-color:#8ED2FF;color:#378FFF}
.alert-message.alert a,.alert-message.alert span{color:#378FFF}
.alert-message.warning{background-color:#fcf8e3;border-color:#faebcc;color:#8a6d3b}
.alert-message.warning a,.alert-message.warning span{color:#8a6d3b}
.alert-message.error{background-color:#FFD7D2;border-color:#FF9494;color:#F55D5D}
.alert-message.error a,.alert-message.error span{color:#F55D5D} 


كيفية استعمال الإضافة في التدوينات
كل ما عليك هو نسخ احد الأكواد التالية ولصقه في تبويب HTML عند كتابتك للتدوينة

 <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 error">
تنبيه
        <i class="fa fa-exclamation-circle"></i>
  </div>


    <div class="alert-message warning">
<i class="fa fa-exclamation-triangle"></i>
        ملاحظة
  </div> 


مع تغيير ما هو باللون الاحمر بما يناسبك
أتمنى أن تكون الإضافة قد اعجبتكم
في أمان الله




هناك 4 تعليقات :

  1. AHMED KORASHY1/2/15 17:50

    السلام عليكم اخي الكريم
    ما اروع مدونتك ودروسك وكل ما تدونة في تلك المدونة

    ردحذف
  2. AHMED KORASHY1/2/15 18:27

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

    ردحذف
  3. شكرا لك , مرورك هو الرائع أخي الكريم

    ردحذف
  4. بصراحة خبرتي بسيطة جداً , و أيضا لا أقدم ذا النوع من الخدمات في الوقت الحالي بسبب إنشغالي

    ردحذف