السلام عليكم ورحمة الله وبركاته
في درسنا اليوم سوف نتعرف على كيفية اضافة أداة الملاحظات بشكل جديد واحترافي وممييز لمدونات بلوجر ، من منا لم يحتاج لعمل رسائل تنبيه في مدونته أو ملاحظة أو مقدمات لزوار المدونة ، ومن مميزات هذه الاضافة وهي عبارة عن صناديق ررسائل وتظهر بالشكل الذي تريده ، ذات اللوان جذابة و تعتمد هذه الإضافة على استخدام خطوط الوسوم وبصيغة CSS3 .
::: طريقة التركيب :::
1- اختر لوحة التحكم ، ثم اختر قالب بعد ذلك اختر تحرير قالب .
2- ابحث عن الوسم :
3- ضع الكود التالي فوقه :
/* Notification Message Highlighter by http://www.homeblog7.blogspot.com */
.H-Btext{color:#FFF;margin-bottom:15px;border-radius:3px;padding:10px}
.H-Bsuccess{background-color:#AA5CB8}
.H-Balert{background-color:#5BA5DE}
.H-Bwarning{background-color:#C619CC}
.H-Bupdate{background-color:#1D89E5}
.H-Binfo{background-color:#18A8AA}
.H-Berror{background-color:#d9534f}
.headertext{font-size:16px;background-color:rgba(0,0,0,0.30);padding:8px 10px;margin:-10px;margin-bottom:10px}
.headertext > .fa{margin-left:5px}
.Homeblogger {overflow: hidden;} ::: طريقة أستخدام هذه الأدوات :::
- تستخدم هذه الأدوات بوضعية HTML .
1- الأداة الأولى :
<div class="Homeblogger H-Bupdate H-Btext" icon="info-circle" title="Update message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa Homeblogger-icon fa-bullhorn"></i>آخر التحديثات</div>
مثال .... على رسالة آخر التحديثات</div>
</div>
<div class="Homeblogger H-Balert H-Btext" icon="info-circle" title="Alert message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa Homeblogger-icon fa-cut"></i>رسالة تنبيه</div>
مثال.... على رسالة التنبيه </div>
</div>
<div class="Homeblogger H-Bsuccess H-Btext" icon="check-circle" title="Success message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa Homeblogger-icon fa-check-circle"></i>رسالة تم بنجاح</div>
مثال....على رسالة تم بنجاج </div>
</div>
<div class="Homeblogger H-Bwarning H-Btext" icon="exclamation-triangle" title="Warning message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa Homeblogger-icon fa-exclamation-triangle"></i>رسالة تحذير</div>
مثال ...على رسالة التحذير </div>
</div>
<div class="Homeblogger H-Binfo H-Btext" icon="info-circle" title="Info message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa Homeblogger-icon fa-info-circle"></i>معلومات عن الرسالة</div>
مثال ...عن معلومات الرسالة </div>
</div>
<div class="Homeblogger H-Berror H-Btext" icon="exclamation-circle" title="Error message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa Homeblogger-icon fa-exclamation-circle"></i>رسالة خاطئة</div>
مثال....على رسالة خاطئة </div>
</div>. 
شكرا أخي الإضافة رائعة جدا
ردحذف