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

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

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

في درس جديد من دروس واضافات بلوجر

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

هاته الرسائل التي طالما ما تضفي رونق خاص الى موضوعك فهي تساعدك الى جذب انتباه الزائر بشكا بسيط

بدون اطالة لنشاهد الرسائل بصورة حية

معاينة

تركيب الاضافة

توجه الى محرر HTML الخاص بمدونتك او موقعك

وابحث عن الوسم التالي

]]></b:skin>

والصق فوقه الكود التالي

.hassoubi-message{position:relative;display:block;background-color:#FAFAFA;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#2f3239;border:1px solid;text-align:right;}
.hassoubi-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#2f3239}
.hassoubi-message span{font-size:14px!important;}
.hassoubi-message i{font-size:16px;line-height:20px}
.hassoubi-message.success{background-color:#f1f9f7;border-color:#1d9d74;color:#1d9d74}
.hassoubi-message.success span {color:#1d9d74}
.hassoubi-message.success a{color:#000;text-decoration:none;font-weight:bold;font-family:tahoma;text-align:right;}
.hassoubi-message.alert{background-color:#DAEFFF;border-color:#8ED2FF;color:#378FFF}
.hassoubi-message.alert a,.hassoubi-message.alert span{color:#378FFF}
.hassoubi-message.warning{background-color:#fcf8e3;border-color:#8a6d3b;color:#8a6d3b}
.hassoubi-message.warning a,.hassoubi-message.warning span{color:#8a6d3b}
.hassoubi-message.error{background-color:#FFD7D2;border-color:#FF9494;color:#F55D5D}
.hassoubi-message.error a,.hassoubi-message.error span{color:#F55D5D}
#msgclose {display: inline-block;
  float: right;color:#000;border: 0 none;border-radius: 0;cursor: pointer;font-size:16px;font-family:tahoma;font-weight:bold;transition:all .5s;}
#msgclose:hover{color:red;transition:all .5s;}
.msu{background:#f1f9f7;}
.malert{background:#DAEFFF;}
.mwar{background:#fcf8e3;}
.merror{background:#FFD7D2;}

تحديد الكل

اما لاضافة الرسائل فما عليك سوى لصق الكود التالي في المكان المناسب لك

رسالة نجاح

<div id="hassoubi-success" class="hassoubi-message success">
رسالة نجاح<button id="msgclose" class="msu" type="button" onclick="{document.getElementById('hassoubi-success') .style.display='none'}">X</button></div>

تحديد الكل

رسالة تحذير

<div class="hassoubi-message warning" id="hassoubi-warning">
رسالة تحذير<button id="msgclose" type="button" class="mwar" onclick="{document.getElementById('hassoubi-warning') .style.display='none'}">X</button></div>

تحديد الكل

رسالة خطأ

<div class="hassoubi-message error" id="hassoubi-error">
رسالة خطأ<button id="msgclose" type="button" class="merror" onclick="{document.getElementById('hassoubi-error') .style.display='none'}">X</button></div>

تحديد الكل

رسالة اغاثة او تخذير

<div class="hassoubi-message alert" id="hassoubi-alert">
رسالة اغاثة او تحذير<button id="msgclose" type="button" class="malert" onclick="{document.getElementById('hassoubi-alert') .style.display='none'}">X</button></div>

تحديد الكل

استبدل النص برسالتك('رسالة نجاح,رسالة تحذير......')

كما يمكنك التحكم في الادة بالشكل الذي تريد
اي سؤال او مشكل لاتتردد بوضعه في النعليق انتهى درس اليوم

موعذنا مع درس آخر وشرح آخر انشاء الله تعالى