حسب مافهت من طلبك وهي نوعا ما قليل الوضوح
جرب هذا الكود وهو يمكن استخدامه كود ملاحظات أو كود تنبيه او كود اعلان وما شابه ذلك
و اضف نص العنوان + نص الرسالة + رابط الملف الصوتي
CODE
<style>
#cnmumes1{
position:absolute;
width: 400px;
margin-right:0;
margin-left:0;
left: 230px;
top: 1px;
z-index:74899;
cursor:move;
border-radius: 7px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
}
#notifjo {
background-color: #d0fdbc;
border: 1px solid #6abf45;
border-radius: 4px;
font-family: "Droid Arabic Kufi","tahoma",sans-serif;
font-size: 13px;
font-weight: normal;
height: 40%;
overflow: hidden;
width: 400px;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
pointer-events: none;
text-align: right;
float: right;
}
#notifjo span h2 {
font-size: 12px;
line-height: 21px;
color: #222;
font-family: Electrolize,ge_dinar_oneregular;
font-weight: normal;
letter-spacing: 0px;
}
#notifjo p {
padding-left:10px;
padding-right:10px;
}
#notifjoT {
background-color: #FB8717;
overflow: hidden;
width: 400px;
padding-left:10px;
padding-right:10px;
}
@-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;}
}
#cnmumesclose {
background:rgba(0, 0, 0, 0);
border: 0 none;
border-radius: 0;
color: #888;
cursor: pointer;
display: inline-block;
float: left;
left:5px;
font: bold 14px Arial Black;
margin: 3px;
position: absolute;
width: 15px;
}
#cnmumesclose:hover {color: #d50000;}
</style>
<div id="cnmumes1">
<button id="cnmumesclose" type="button" onclick="{document.getElementById('cnmumes1') .style.display='none'}">X</button>
<div id='notifjo'>
<span>
<div id='notifjoT'><h2><b>عنوان</b> </h2></div>
<p>1. اهلا وسهلا.</p>
<p>2. كيف حالك.</p>
<p>3. أسعد الله أوقاتك.</p>
<p>4. نشكرك لزيارتك لموقعنا.</p>
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="ضع رابط الملف الصوتي" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</span>
</div>
</div>
مثال