السلام عليكم ورحمة الله وبركاته.
اليوم اقدم لكم فى هذه التدوينة صندوق التنبيهات بشكل احترافى وجديد للبلوجر والجدير بالذكر ان هذا الصندوق يصلح ان تضع فيه رسالة ترحيبية ايضاً
معاينة الصندوق
طريقة التركيب
- توجه الى لوحة تحكم مدونتك من هنا
- توجه الى التخطيط ثم اضف اداة html/javascript
- وضع الكود التالي داخل الاداة
<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>
غير ما يناسبك ومبرووك عليك الاضافة
شكرا لك اخي
ردحذفالعفو اخى سعيد بزيارتك الكريمة
حذفوربما اضع فيها آية كريمة أو حديث شريف حقا مبدع اخ محمد
ردحذفان شاء الله اجربها هذا الاسبوع
شكراً لك أخى :) بالتوفيق (k)
حذفدائما الجديد واصل (k)
ردحذفشكراً لك :) مرورك و تعليقك دافع يؤشجعنا على الإستمرار (f)
حذفلماذا لا استطيع ان انسخ الاكواد لا عن طريقة الموس او ctrl+c
ردحذفنأسف على هذا المشكل سوف يتم حله :)
حذف