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

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

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

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

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/AVvXsEhs1cX1ZKKJ1zB15vymc7j8m4uwV5P5h-lqDBrsQ9l5r2IPodJCkDI-bcgeYWQlrL6rMBGeQgJfd96erlCiYe7Kf-XWzu_CVrSUxYiPmiXf_gA6jXULwyfOFe7Yb1FlRY7fEungFwwL7u0/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqteN31HquYdv7FJgjg2qbXSeaLljVyjPZKcR8CRW14INhWL27uJH9_ij57Jk08EEP8Qobxe34IjWwhKWMnaTz_eTNBnSGoZ3Tmmuql-9tsG4STBgffNrTmvkjj3Lwrf6JpzOzDRDURWY/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzy3d9DCf_zqhXt9bA3SazZ9LX2n2PrDpn__kvHn5Q9B7sIJczKw9YMH42gNvRY25NjHBSkev47lJskuVBHX-UArZ3k_lki6X_qx0qUAPFS8PHktuewVkITSe_IVkNWgkElfgIhx-Yqgg/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. وقم بالتغير ما هو باللون الأحمر.

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