عندما تقوم بعمل تدوينة ما وتريد إخبار الزائر عن ملاحظة ما في التدوينة أو تحذير عن شئ ما ، فإضافة اليوم سوف تساعدك علي تنبه الزائر علي اي شئ تريده ، ما عليك إلا إتباع الخطوات الموجودة في هذا الدرس وسوف تفهم طريقة تركيب الإضافة بسهولة.
شرح تركيب الإضافة :
- أولا من لوحة تحكم القالب ثم إلي قسم القالب وبالضغط HTML
- بعد هذا قم بالبحث في القالب عن هذا الوسم ]]></b:skin>
- وقم بوضع الكود التالي فوقه
.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/AVvXsEhxCh8Ux2j2IoIPUSuQEL0-UV08LDuFGLun4eVxrdFih2I69dIfXqZC841msXGVYZj5_rcRj6TzgkRnrjoAqWSIlCj7peO0ujUzXnbXGUSQYwoY-fndaxAJTttEfjVkzVObw9BQQOrgVdw/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiRUUknC40V6CfxvuET85FnLr5n8W6fbf7ws_TQptrn0dEeHJM44nS8C2oJ7diAGNGvdzrVPAksujqHrzRNjA11SNAUQVOm3ofj3ab4g7npUbwq1fXPurvjcCCIDGajpR5FWMmTmR5ssc/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcrf9Wg_jxfaMnicae9lujS7YLzQf18S5LjUGJYbRZ9Xc7tYhaqyOD1aeHDvX2GDhIDyP7iQvRoDcMxH2e_PwqlHdfBotbQAj_nmd0ksB9KjvuGZleY1hIJU0irvO9mNStLQsOCSpoeA/s1600/warning.png') no-repeat 12px 8px;
color: #fff;
}
- وقم بوضع الكود التالي قبل هذا الوسم </head>
<link rel="stylesheet" type="text/css" href="//www.fontstatic.com/f=droid-sans" />
- عندما تقوم بالعمل تدوينة إذهب إلي تبويب HTML
- وقم بوضع الأكواد التالية في التبويب
<div class='info'>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</div>
<div class='tips'>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</div>
<div class='warning'>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</div>
- وقم بالتغير ما هو باللون الأحمر.
إلي اللقاء في تدوينة جديدة.