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

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

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

في هذه التدوينة اقدم لكم إضافة جميلة و مميزة تزيد من مظهر تدويناتكم جملاً

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

أترككم مع معاينة مباشرة للإضافة

معاينة الإضافة

كيفية إضافة الاداة

قم بالبحث عن الوسم </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> 

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