إضافة صندوق الإشعارات و التنبيهات - الیوم معنا اضافة جمیلة ھي اضافة صندوق الإشعارات و التنبيهات بشكل جدید في مدونات بلوجرو بتنسیقك الخاص و یمكنك التحكم بشكل الاضافة كما ترید مثل | العرض ,اللون ,الوصف ... إلخ | و ھو یتیح لك عرض الإشعارات و التنبيهات علي مدونتك بشكل أحترافي وعائم وهذا زر المعاينة للأطلاع علي إضافة صندوق الإشعارات و التنبيهات
طريقة التركيب
- الآن نتوجه إلى بلوجر
- تخطــــــيــــط
- اضافة اداة HTML/Javascripts
- الآن نقوم بلصق الكود التالي ثم نقوم بالضغط على زر " حفظ "
<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>
ثم نقوم بتغيير النص المعلم بلون الأحمر وكذلك الأخضر
و مبروك عليك الاضافة بالتوفيق
إضافة مميزة .. ما شاء الله
ردحذفشكراً لك أستاذنا الغالي ..
العفو يا طيب
حذفتشرفت بمرورك الغالي
إضافة مميزة يعطيك العافية
ردحذفتم نشر موضوع في مدونتي :)
شكرا ياغالي
حذفمرورك شرف ليـــ
اضافة جميله شكراا لك
ردحذفاريد اضافة صندوق لاضافة الاكواد كما عندك اخي رجاء الرد
اهلا ياطيب
ردحذفهذه ليست اضافة
هذا يسمي اقتباس
ويمكن تنسيقه با اشكال متعددة
وان شاء الله سوف أطرح موضوع قريبا حول هذا الموضوع