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

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


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

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

أنتقل إلى لوحة التحكم في مدونتك -->> التخطيط ثم إضافة أداة ثم أختر أداة 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>

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



مشاركات أقدم المقال التالي
2 تعليق
  • M.H.I
    M.H.I 08‏/11‏/2014، 9:52:00 م

    اخى الكريم لقد حصلت على قالبك هل تسمح لى باستخدامه واعرف ايضا انه فى الاصل قالب اجنبى
    http://dabourphone.blogspot.com/

    • مداد الجليد
      مداد الجليد 08‏/11‏/2014، 10:32:00 م

      شكرا لطلبك
      طالما انك حصلت على النسخة الاجنبية اخي الكريم يمكنك تطوير القالب بشكل مختلف ونسبه اليك افضل لك مما تفعله الان فالقالب من كثرة النسخ ثقيل جدا وغير مقبول

أضف تعليق
عنوان التعليق