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

اما بعد متابعي ومتابعات موقع إنسانية نملة

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

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

الشرح

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

]]></b:skin>

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

12345678910111213141516171819.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 وغير قيمته لتغيير لو ن الرسالة