أداة الملاحظات بأشكال جديدة ومميزة لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

في درسنا اليوم سوف نتعرف على كيفية اضافة أداة الملاحظات بشكل جديد واحترافي وممييز لمدونات بلوجر ، من منا لم يحتاج لعمل رسائل تنبيه في مدونته أو ملاحظة أو مقدمات لزوار المدونة ، ومن مميزات هذه الاضافة وهي عبارة عن صناديق ررسائل وتظهر بالشكل الذي تريده ، ذات اللوان جذابة و تعتمد هذه الإضافة على استخدام خطوط الوسوم وبصيغة 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>
 

2- الشكل الثاني :

 <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>
 

3- الشكل الثالث:

 <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>
 

4- الشكل الرابع :

 <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>
  

5-الشكل الخامس :

 <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>

 

6-الشكل السادس :

 <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>. 

انقر هنا للمعاينة