اضافة صندوق التنبيهات بشكل جديد واحترافي للبلوجر


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

معاينة الصندوق

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

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

<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>
غير ما يناسبك ومبرووك عليك الاضافة

دبور فون

M.H.I

هناك 8 تعليقات:

  1. الردود
    1. العفو اخى سعيد بزيارتك الكريمة

      حذف
  2. وربما اضع فيها آية كريمة أو حديث شريف حقا مبدع اخ محمد
    ان شاء الله اجربها هذا الاسبوع

    ردحذف
  3. الردود
    1. شكراً لك :) مرورك و تعليقك دافع يؤشجعنا على الإستمرار (f)

      حذف
  4. لماذا لا استطيع ان انسخ الاكواد لا عن طريقة الموس او ctrl+c

    ردحذف
    الردود
    1. نأسف على هذا المشكل سوف يتم حله :)

      حذف

نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊

أحدث الأخبار

10/recent