صناديق رسائل إعلامية لمدونات بلوجر مخصصة

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

صناديق الرسائل الإعلامية هي عبارة عن جمل يتم إضافتها لمدونتك من أجل إعلام زوارك على أي شيء ترغب بتوضيحه مثل رسائل التحذير أو الأخبار إلخ... واليوم بإذن الله سوف نقدم لكم اربعة صناديق إعلامية يمكن الإستفادة منها لتركيبها على مدونتك بطريقة جميلة وسلسة مع زر إغلاق لهذا الصندوق وطبعاً تم تخصيصها بعدة ألوان حتى تستفد منها على شكل المثال التالي:

معاينة الإضافة

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

أنتقل إلى لوحة التحكم في مدونتك -->> التخطيط ثم إضافة أداة ثم أختر أداة HTML/JavaScript

ثم أضف الكود التالي داخل الأداة:

<style type='text/css'>
div.alert-message {
display: block;
padding: 13px 12px 12px;
font-weight: bold;
font-size: 14px;
color: white;
background-color: #2ba6cb;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
position: relative;
}
div.alert-message .box-icon {
display: block;
float: left;
background-image: url(‘icon.png’);
width: 30px;
height: 25px;
margin-top: -2px;
background-position: -8px -8px;
}
div.alert-message p {
margin: 0px;
}
div.alert-message.success {
background-color: #5da423;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.success .box-icon {
background-position: -48px -8px;
}
div.alert-message.warning {
background-color: #e3b000;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.warning .box-icon {
background-position: -88px -8px;
}
div.alert-message.error {
background-color: #c60f13;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.error .box-icon {
background-position: -128px -8px;
}
div.alert-message a.close {
color: #333;
position: absolute;
left: 4px;
top: -1px;
font-size: 17px;
opacity: 0.2;
padding: 4px;
}
div.alert-message a.close:hover, div.alert-box a.close:focus {
opacity: 0.4;
}
          </style>
<script type="text/javascript">// <![CDATA[
$(function(){
$(".alert-message").delegate("a.close", "click", function(event) {
event.preventDefault();
$(this).closest(".alert-message").fadeOut(function(event){
$(this).remove();
});
});
})
// ]]></script>

الآن أختر نوع الرسالة التي ترغب بإضافتها على مدونتك ثم ألصق الكود الخاص بها أسفل الأكواد السابقة في اداة HTML/JavaScript

• رسالة معلومات

<div class="alert-message info"> <div class="box-icon"></div> <p>رسالة معلوماتية <a href="" class="close">&times;</a> </p></div>

• رسالة إخبارية

<div class="alert-message success"> <div class="box-icon"></div> <p>رسالة إخبارية<a href="" class="close">&times;</a> </p></div>

• رسالة خطأ

<div class="alert-message warning"> <div class="box-icon"></div> <p>رسالة إعلام<a href="" class="close">&times;</a> </p></div>

• رسالة تحذير

<div class="alert-message error"> <div class="box-icon"></div> <p>صندوق رسالة تحذير<a href="" class="close">&times;</a> </p></div>

هكذا أنقر حفظ ثم أنقر على عرض المدونة لمشاهدة النتائج :)