إضافة رسائل التنبيهات والإشعارات لمدونات بلوجر

جئنا لكم اليوم بإضافة جديدة وبمظهر خاص لمدونات بلوجر, رسائل التنبيه والتي من خلالها يمكنك الأعلان عن اي اجراء بشكل جميل وبسيط يجذب انتباه الزائر إليك المعاينة وطريقة إضافة الأداة مع اداة بسيطة لأستخراج الكود بسهولة.

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

تركيب الإضافة لمدونات بلوجر

قمت بتنسيق الإضافة بالشكل الذي يناسب جميع قوالب بلوجر ولكن بإمكانك تغير اي شيئ في اكواد التنسيق CSS من حيث الأولوان او طريقة العرض.

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

]]></b:skin>

/*---- style notification ----*/
.notification{color:#ffffff;margin:10px 5px;padding:5px;}
.notification .info{position: relative;overflow: hidden;display: block;-webkit-flex:1;flex:1;padding:10px;word-break:break-word;}
.notification .icon i{padding:5px;width:35px;text-align:center;font-size:22px;}
.notification.normal{background:#f2f2f2;color:#000000;box-shadow: 0 3px 10px rgba(0,0,0,0.16);}
.notification.green{background: #2c9672;}
.notification.red{background:#fb6548;}
.notification.blue{background:#22a7f0;}
.notification.dblue{background:#607D8B;}
.notification.purple{background:#8a5bde;}
.notification.dred{background:#ff075b;}
.notification.orange{background: #f79029;}
.notification .info a,.notification .info samp{font-size: 12px;text-decoration:none;padding: 2px 10px;margin: 2px 5px;color:white!important;background:rgba(255,255,255,0.48)!important;}
.notification .info p{margin:0;padding:5px 0;font-size:14px;color:white;}
.notification.green .info b{color:#367e58 !important;}
.notification.red .info b{color:#ad4f3d !important;}
.notification.blue .info b{color:#656c7a !important;}
.notification.orange .info b{color:#976534 !important;}
.notification .icon i.hide{display:none;}
.notification .info a{border-radius:30px;-o-border-radius:30px;-ms-border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;}
.notification{border-radius:6px;-o-border-radius:6px;-ms-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}
.notification{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-moz-box-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}

بعد إضافة اكواد التنسيق الخاصة بالإضافة قم بالحفظ والأن قم بتحميل الأداة البسيطة التي قمت بتخصيصها لتسهيل عليك إنشاء الرسائل النصية ووضعها داخل التدوينة.

تحميل اداة توليد الرسائل والتنبيهات

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

ثم قم بعدها بنسخ الكود كاملاً ولصقة دخل حقل عرض Html في التدوينة.

تحميل الأداة