إضافات ملاحظات بشكل جديد إلي منصة بلوجر

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

معاينة الإضافة إضغط هنا

شرح تركيب الإضافة :

1. أولا من لوحة تحكم القالب ثم إلي قسم القالب وبالضغط HTML
2. بعد هذا قم بالبحث في القالب عن هذا الوسم ]]></b:skin>
3. وقم بوضع الكود التالي فوقه

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
  font-family: 'droid-sans';
font-size: 16px;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyW2XqkpgwodNtjBOCeSYKEufM3pZ9KdQ5dXrAWdkaczgEb2N1nbI9z3RvraFrKK24Nxw7BXPW3O4NFK3Y5fa0yAFrxE8z_2XSNIsGCCnGMGtOJYyOP7YnqtVaf2Ouwr7iGVT3beUm8Bs/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZm7cr1p1E1GrxuY4pSBn76R_SHGK9MaAmsHecq212_dCsvBT4wy_wqzsk0hqHPYVzD6Z4FXYWxgm77CPMfujNkNhl_FLF3O3RfB3lmeatVoqQ1GzJ30Stlc32HGk0fXQb040W8-CuJk/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDbr8sA77DxVB5pbV8wnSGPwnwNuG2LdK1BbwaxWXF-tuzysmIWbUn06RSYKOeHp4Jl5ZcbVekS6a-3R_VbFsOkPNs3FZvOt128hut_d-DhhQ_yiQ4WtfeZ-m5hc-Vz3SEnMHhZcN0pgM/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

1.  وقم بوضع الكود التالي قبل هذا الوسم  </head>

<link rel="stylesheet" type="text/css" href="//www.fontstatic.com/f=droid-sans" />

1. عندما تقوم بالعمل تدوينة إذهب إلي تبويب HTML 
2. وقم بوضع الأكواد التالية في التبويب

 <div class='info'>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</div>

<div class='tips'>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</div>


<div class='warning'>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</div>

1. وقم بالتغير ما هو باللون الأحمر.

إلي اللقاء في تدوينة جديدة.