عندما تقوم بعمل تدوينة ما وتريد إخبار الزائر عن ملاحظة ما في التدوينة أو تحذير عن شئ ما ، فإضافة اليوم سوف تساعدك علي تنبه الزائر علي اي شئ تريده ، ما عليك إلا إتباع الخطوات الموجودة في هذا الدرس وسوف تفهم طريقة تركيب الإضافة بسهولة.
شرح تركيب الإضافة :
- أولا من لوحة تحكم القالب ثم إلي قسم القالب وبالضغط 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/AVvXsEi0zGHm6ptXCxBYp3kJ-10WvPzXfnRfxV8zbJqDvqzG024xr94OyyT2dSQFiS43a_Q7dvZEvLzVmnogijanC36FnzF-gdkCPrbIQwg1A0tGy29wobO3VintW_56Smhqhv6ycAHST2-0YZU/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghjG3Fw3Wixp10QzONOttHiu0lHDc__GBvOUd8u65h6WjKR53NZICb1Y7-TeZpFmWLud5wUo4vqKJOY86DI4tRr_5814BLjlKe6joW6bkRXzQawP02l01JXIAnfrTTCc8edUrtsRBEPkk/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwsG9YgZHxD0JeISUGm0nImY9Hp7lejhXvDLtX_6e6IZai_mq7FYn7asuoBZhkP8obLmfgs0g3bbHMqr8lNC3uuC79bSA2bFiNfTZ_4bqQsaargo8nklPIqPplv0SSR1IdqEC57dM00V4/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>
- وقم بالتغير ما هو باللون الأحمر.
إلي اللقاء في تدوينة جديدة.
ليست هناك تعليقات:
إرسال تعليق