رسائل اشعارية بالون مختلفة لمدونتك او موقعك مع التنسيق

بسم الله الرحمان الرحيم

اما بعد متابعي ومتابعات مدونة حاسوبي Astuce

في شرح جديد من شروحات بلوجر حول طريقة اضافة رسائل اشعارية بالون مختلفة لمدونتك او موقعك مع التنسيق

نبدأ على بركة الله

المعاينة

الشرح

اول خطوة توجه الى محرر قالبك وابحث عن الوسم التالي

]]></b:skin>

واضف قبله الكود التالي

.alert-message{position:relative;font-family:tahoma;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#39484d;text-align: center;}
.alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d}
.alert-message span{font-size:14px!important}
.alert-message i{font-size:22px;text-align:left;display:inline-block;position:absolute;right:0;top:0;padding:20px;opacity:0.8;}
.alert-message.success{background-color:#00acd6;color:#fff}
.alert-message.success a,.alert-message.success span{color:#fff}
.alert-message.alert{background-color:#0073b7;color:#fff}
.alert-message.alert a,.alert-message.alert span{color:#fff}
.alert-message.warning{background-color:#efa666;color:#fff}
.alert-message.warning a,.alert-message.warning span{color:#fff}
.alert-message.error{background-color:#f56c7e;color:#fff}
.alert-message.error a,.alert-message.error span{color:#fff}
.alert-message.happy{background-color:#FA8734;color:#fff}
.alert-message.happy a,.alert-message.happy span{color:#fff}
.alert-message.link a,.alert-message.link span{color:#fff}
.alert-message.link{background-color:#F44242;color:#fff}
.alert-message.hi a,.alert-message.hi span{color:#fff}
.alert-message.hi{background-color:#57DF69;color:#fff}
.alert-message:hover {background-image: linear-gradient(110deg, #766D6C 0%, #606364 50%, transparent 50%, transparent 100%);background-size: 200%;background-position: 150% 0;background-repeat: no-repeat;transition: background-position .9s ease, color .15s ease;color: #eee;}

تحديد الكل

الان لاضافة الرسائل ما عليك سوى نسخ الكود المرادف للرسالة المراد وضعها

رسالتك هنا

<div class="alert-message success">
رسالتك هنا</div>

تحديد الكل

رسالتك هنا

<div class="alert-message alert">
رسالتك هنا</div>

تحديد الكل

رسالتك هنا

<div class="alert-message warning">
رسالتك هنا</div>

تحديد الكل

رسالتك هنا

<div class="alert-message link">
رسالتك هنا</div>

تحديد الكل

رسالتك هنا

<div class="alert-message error">
رسالتك هنا</div>

تحديد الكل

رسالتك هنا

<div class="alert-message happy">
رسالتك هنا</div>

تحديد الكل

رسالتك هنا

<div class="alert-message hi">
رسالتك هنا</div>

تحديد الكل

التنسيق

كل سالة لديها معرف تجده كالتالي
<div class="alert-message example">رسالتك هنا</div>
لتغيير اللون ماعليك سوى البحث في الكود الاول عن
.alert-message.example

بعدها ابحث عن background-color ثم غير قيمتها

وابحث ايضا عن color وغير قيمته لتغيير لو ن الرسالة

• غرّد
• شارك
• شارك
• شارك
• شارك