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

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

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

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

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/AVvXsEgcVjMSlyz6c4GM9lrhNncCR04v2wUqAFgv52q3vX8Z6FCE3AT6uL2cHTakELpTekosc0cn5UhL3uhOML3PZIP9zMHgM2tcKUDJz0gl6XVLd2hv_mNZrErec7BMNjBCxMQPHulrIBxFNfE/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpW779D_N7D8av1NiFpz2FoVG0_9toFMCu0KHQY_9aPKVbgRyaZg9C0HRNKDJU3k9V3pe8eWzBQoSwl5sPDD9_ltjSPewodLOc7MnC6hbPSYb59FqlnkkO3BjnF2zAORU0857bvSf_RGc/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWcsyBxqJPm5Frgfn4SX4xcVvUR4-YkvtSoV2i-bm2RryIfJGbI9iAtUeHD4QnNGbcethmvLHRt19wgqnsn671U8egIA29inr9iJybrBn2afp2HyKoY5qF14Z2jMdgO4qGfte_x1-VRmE/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. وقم بالتغير ما هو باللون الأحمر.

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