عندما تقوم بعمل تدوينة ما وتريد إخبار الزائر عن ملاحظة ما في التدوينة أو تحذير عن شئ ما ، فإضافة اليوم سوف تساعدك علي تنبه الزائر علي اي شئ تريده ، ما عليك إلا إتباع الخطوات الموجودة في هذا الدرس وسوف تفهم طريقة تركيب الإضافة بسهولة.
شرح تركيب الإضافة :
- أولا من لوحة تحكم القالب ثم إلي قسم القالب وبالضغط 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/AVvXsEiJHo6xajBtnWRhG_7RoHq5lyw9LSMJSHzS16kMTsM7FkZWw4Bnz1YYvOkGy9M3n8IYK6cq-eBbDiVg_xOUnKTx2bAilFOibECyGZFnIsZE4nFZaimEQSDdjWJnt9jUbkK_zjyG0-ZSlp8/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguM3F0poB7NODPYB6yUSNgyoJPmbLOAPqth474kQBlux-boT8PDJCWiKF9mm07x75YnDSi_Y9E86DvOvGny-L-0EOvFOjw9F-23WbpGbdYZTbH8S1hOF3PGKsJnV2mhUb6zmaJqTr78r0/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyxgUEteqooK6ZK385vOnEzA78I117d4oaNA-vzJO54FB-UNendgS-nkA9sGJM7BpAGkivSYHWsvl_YVkJOc-AiDXWpndqSm4pXwCLetb6HE7smlzi9QpBMzht8TQ1IDaQUqV75xgnGKI/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>
- وقم بالتغير ما هو باللون الأحمر.
إلي اللقاء في تدوينة جديدة.