إضافة صندوق الإشعارات و التنبيهات

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

معاينة

طريقة التركيب

1. الآن نتوجه إلى بلوجر
2. تخطــــــيــــط
3. اضافة اداة HTML/Javascripts
4. الآن نقوم بلصق الكود التالي ثم نقوم بالضغط على زر " حفظ "

<style>
table.imp-db-thks {
background-color: #34495E;
border-top: 6px solid white;
}
i.fa.fa-smile-o {
margin: -1px 10px 0px 0px;
}
table.imp-txt-db {
background-color: #E8E8E9;
border-top: 6px solid white;
width: 217px;
}
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
</style>
<div id='divName' style='
position:  fixed;
border: 5px solid;
top: 25px;
box-shadow: 0 1px 10px 1px rgba(0,0,0,0.2);
right: 25px;
background:  none repeat scroll 0 0 #ffffff;
border-radius: 4px;
padding:5px;
text-align:right;
-webkit-animation: fadeOutnotif 10s linear forwards;
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;'>
<table class="imp-db" align='center' bgcolor='#dddddd' border='0' cellpadding='1' cellspacing='2' width='218'>
<tbody><tr>
<td align='center' bgcolor='#DDDDDD' style='font-size: 14px; color: #34495E; text-align: center; width: 100%; margin: 0 auto; font-weight: 700;' valign='middle' width='179'>تنويه! <span style='color: #060;  font-size: 14px;'></span></td>
<td align='right' bgcolor='#dddddd' valign='middle' width='30'>
</td>
</tr>
</tbody></table>
<table class="imp-txt-db" border='0' cellpadding='5' cellspacing='1' width='240'>
<tbody><tr>
<td align='center' bgcolor='#eeeeee' valign='middle'><span style='color: #000;font-size: 14px;'>طريق جديد لأحتراف بلوجر معنا ستصبح مدون محترف</span>
</td></tr> </tbody></table> </div>

ثم نقوم بتغيير النص المعلم بلون الأحمر وكذلك الأخضر

و مبروك عليك الاضافة بالتوفيق

شارك المقالة عبر:

إقرأ أيضا