تركيب صندوق تنبيهات منبثق بشكل احترافي

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

عدنا مجددا لنضع لكم  فى هذه التدوينة صندوق التنبيهات منبثق بمجرد الدخول للموقع و

 بشكل احترافى

 مع العلم ان هذا الصندوق يمكن ان تضع فيه رسالة ترحيبية 

ويمكنك التعديل عليها كما يحلو لك 

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

1. توجه الى لوحة تحكم مدونتك

1. توجه الى التخطيط
2. 
   
3. ثم اضف اداةhtml/javascript
4. 
   
5. وضع الكود التالي داخل الاداة

<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-db {
    background-color: #0894D8;
}
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; 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: 2px;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='220'>
  <tbody><tr>
    <td align='center' bgcolor='#eeeeee' valign='middle'><span style='color: #333;font-size: 13px;'>مرحبا بكم مجددا في مدونة عملاق النت</span>
    </td>  </tr> </tbody></table> </div>

غير ما يناسبك ومبروك عليك الإضافة

نلتقي قريبا إن شاء الله والسلام عليكم