بسم الله الرحمن الرحيم

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

أقدم لكم كود لعرض التنبيهات بشكل رائع و جميل مع إضافة صوت للنبيه بشكل جميل ..

و الكود مقسم ل3 اجزاء
Css + Javascript + Html

http://im38.gulfup.com/zOOVp.jpg

http://im38.gulfup.com/sFiie.jpg

http://im38.gulfup.com/1Ep1F.jpg


شكل النتيجة بعد إضافة الكود
http://im38.gulfup.com/Fthou.jpg




لرؤية مثال حي
[YTBVIDEO]http://www.youtube.com/watch?v=4-8CeG0p9_w[/YTBVIDEO]



فكرة عمل الكود ..
التحكم بشرط إرسال اى تنبية جديد من خلال كود الشرط العادي ..
و وضع كود الشكل الجديد مع إضافة تأثير JQuery عليه
مع ضافة التحكم في عرض الشكل مرة اخرى ام لا .. من خلال التحكم بالكوكز من خلال الJavascirpt


شرح التركيب
تاخد الكود كله زي ما هو كدا
و تضعه فى اخر سطر فى قالب الهيدر


الكود
رمز Code:


.aw_all_msg{
background:#0072c6;
height: 100%;
position: fixed;
top:0px;
left: -200px;
width:195px;
display: none;
z-index: 9999999999;
border-right:1px solid #FFFFFF;
}
.options_aw_msg {
position:relative;
top:50%;
text-align:center;
}
.aw_newmsg {
float:left;
}
.aw_newmsg li {
margin:5px 10px;
}
.aw_newmsg li a {
display:block;
padding:10px;
background:#fff;
width:150px;
font-weight:700;
font-size:13px;
text-decoration:none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.aw_newmsg li a:hover{background:#eeeeee;}
.aw_newmsg li a span{
background:#a10;
color:#fff;
padding:3px 7px;
margin-left:5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.close_aw_msg{
}
.close_aw_msg input{
border-style:solid !important;
border-color:#ffffff !important;
border-width:1px !important;
cursor:pointer;
}
.nomoreshow {
color:#ffffff !important;
font-size:16px !important;
font-weight:700 !important;
margin-top:15px !important;
cursor:pointer;
}









.aw_all_msg{display: block;}
{vb:raw notifications_menubits}















عدم الإظهار مرة أخرى